/* ═══════════════════════════════════════════════════════════════
   EB KLEIN DESIGN TOKENS — single source of truth
   ─────────────────────────────────────────────────────────────────
   Link FIRST in <head>, before any other stylesheet:
     <link rel="stylesheet" href="/assets/tokens.css">

   Canonical names use the --eb-* prefix.
   Per-page aliases (--g, --primary, --ink, --leaf, etc.) point at
   canonical names and exist so existing CSS rules continue to work.
   NEW code should reference --eb-* names directly.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ─── CANONICAL BRAND ─── */
  --eb-brand:           #1A5828;
  --eb-brand-strong:    #134220;
  --eb-brand-hover:     #2A7D2E;
  --eb-brand-tint:      #E8F2EB;
  --eb-brand-faint:     #F3F8F4;
  --eb-gold:            #B8963E;
  --eb-gold-tint:       #FFF8E6;

  /* ─── CANONICAL SURFACES (iOS Light) ─── */
  --eb-bg:              #F2F2F7;
  --eb-surface:         #FFFFFF;
  --eb-surface-2:       #FAFAFC;
  --eb-surface-3:       #E5E5EA;

  /* ─── CANONICAL TEXT ─── */
  --eb-label:           #1C1C1E;
  --eb-label-2:         #3C3C43;
  --eb-label-3:         #8A8A8E;
  --eb-label-4:         #A1A1A6;

  /* ─── CANONICAL HAIRLINES ─── */
  --eb-hairline:        rgba(60,60,67,.12);
  --eb-hairline-2:      rgba(60,60,67,.18);
  --eb-hairline-3:      rgba(60,60,67,.29);

  /* ─── SYSTEM SEMANTIC ─── */
  --eb-red:             #FF3B30;
  --eb-yellow:          #FF9F0A;
  --eb-orange:          #FF9500;
  --eb-green:           #34C759;
  --eb-blue:            #007AFF;

  /* ─── FONTS ─── */
  --eb-font-system:     -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif;
  --eb-font-serif:      'Fraunces', Georgia, serif;
  --eb-font-mono:       'SF Mono', ui-monospace, Menlo, Consolas, monospace;

  /* ─── SAFE-AREA ─── */
  --eb-safe-top:        env(safe-area-inset-top, 0px);
  --eb-safe-bottom:     env(safe-area-inset-bottom, 0px);

  /* ─── SHADOWS ─── */
  --eb-shadow-card:     0 0 0 .5px rgba(60,60,67,.06), 0 1px 2px rgba(0,0,0,.04);
  --eb-shadow-pop:      0 0 0 .5px rgba(60,60,67,.08), 0 8px 24px rgba(0,0,0,.10);
  --eb-shadow-soft:     0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --eb-shadow-mid:      0 4px 16px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
  --eb-shadow-deep:     0 8px 32px rgba(0,0,0,.09), 0 3px 8px rgba(0,0,0,.04);

  /* ═══════════════════════════════════════════════════════════════
     PER-PAGE ALIASES (legacy compatibility — DO NOT use in new code)
     ═══════════════════════════════════════════════════════════════ */

  /* Beratung (page.html) short aliases */
  --g:                  var(--eb-brand);
  --g2:                 var(--eb-brand-strong);
  --g-lt:               var(--eb-brand-tint);
  --g-m:                rgba(42,125,46,.1);
  --blue:               var(--eb-blue);
  --gold:               var(--eb-gold);
  --gold-lt:            var(--eb-gold-tint);
  --red:                var(--eb-red);
  --bg:                 var(--eb-bg);
  --card:               var(--eb-surface);
  --t1:                 var(--eb-label);
  --t2:                 var(--eb-label-2);
  --t3:                 var(--eb-label-2);
  --t4:                 rgba(60,60,67,.6);
  --t5:                 rgba(60,60,67,.3);
  --sep:                var(--eb-hairline);

  /* Beratung --eb-* extended aliases */
  --eb-gruen:           var(--eb-brand);
  --eb-gruen-mid:       var(--eb-brand-hover);
  --eb-gruen-light:     var(--eb-brand-tint);
  --eb-gruen-faint:     var(--eb-brand-faint);
  --eb-gold-light:      var(--eb-gold-tint);
  --eb-bg-elev:         var(--eb-surface);
  --eb-bg-secondary:    var(--eb-surface-2);
  --eb-text:            var(--eb-label);
  --eb-text-secondary:  var(--eb-label-2);
  --eb-text-muted:      var(--eb-label-3);
  --eb-text-faint:      var(--eb-label-4);
  --eb-border:          var(--eb-surface-3);
  --eb-border-strong:   #D1D1D6;
  --eb-error:           var(--eb-red);
  --eb-success:         var(--eb-green);
  --eb-warning:         var(--eb-orange);
  --eb-font-sans:       var(--eb-font-system);

  /* Energieausweis aliases */
  --surface:            var(--eb-surface);
  --surface2:           var(--eb-bg);
  --surface3:           var(--eb-surface-3);
  --surface-press:      rgba(0,0,0,.04);
  --border:             var(--eb-hairline);
  --border2:            var(--eb-hairline-2);
  --text:               var(--eb-label);
  --text2:              var(--eb-label-2);
  --text3:              var(--eb-label-3);
  --primary:            var(--eb-brand);
  --primary-strong:     var(--eb-brand-strong);
  --primary-dim:        var(--eb-brand-tint);
  --primary-tint:       rgba(26,88,40,.08);
  --primary-dark:       var(--eb-brand-strong);
  --green:              var(--eb-brand);
  --green-system:       var(--eb-green);
  --yellow:             var(--eb-yellow);

  /* Förderantrag aliases */
  --g3:                 rgba(42,125,46,.1);
  --ink:                var(--eb-label);
  --sub:                #6B6B6B;
  --font:               var(--eb-font-system);

  /* Root marketing aliases */
  --ink2:               var(--eb-label-2);
  --ink3:               var(--eb-label-3);
  --ink4:               var(--eb-label-4);
  --leaf:               var(--eb-brand);
  --leaf2:              #236B34;
  --leaf3:              #2F8A45;
  --mist:               var(--eb-bg);
  --white:              var(--eb-surface);
  --gold2:              #FDF3DC;
}

/* Default system font on root; pages with custom fonts override on body */
:root { font-family: var(--eb-font-system); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }