/* ═══════════════════════════════════════════════════════
   STROMVERGLEICH DRESDEN — Design Tokens
   Theme: "Elbgrün Direkt"
   ═══════════════════════════════════════════════════════ */

:root {
  /* ── Brand Colors ── */
  --color-primary:       #0B6B53;
  --color-primary-dark:  #084D3C;
  --color-primary-light: #E6F4EF;
  --color-lime:          #C8F25C;
  --color-lime-dark:     #A8D43C;

  /* ── Surfaces ── */
  --color-navy:          #0C1F2B;
  --color-navy-mid:      #152838;
  --color-bg:            #F7F8F6;
  --color-surface:       #FFFFFF;
  --color-surface-muted: #F0F4F1;
  --color-border:        #D8E2DA;

  /* ── Text ── */
  --color-text:          #1A2822;
  --color-text-muted:    #5A7060;
  --color-heading:       #0C1F2B;
  --color-text-inverse:  #F0F4F1;

  /* ── Semantic ── */
  --color-success: #22863A;
  --color-warning: #D97706;
  --color-error:   #C8391A;

  /* ── Typography ── */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body:    'Hanken Grotesk', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* ── Type Scale ── */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;

  /* ── Radii ── */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  20px;
  --radius-full:9999px;

  /* ── Shadows ── */
  --shadow-sm: 0 2px 8px rgba(12,31,43,0.08);
  --shadow-md: 0 4px 16px rgba(12,31,43,0.10);
  --shadow-lg: 0 8px 32px rgba(12,31,43,0.14);

  /* ── Layout ── */
  --container-max: 1200px;
  --header-h:      64px;
}