/* ============================================================
   Expert-Grup · Design Tokens
   ------------------------------------------------------------
   Single source of truth. Imported by all surfaces.
   Token contract: --eg-{category}-{role}-{step}
   ============================================================ */

:root{
  /* ── Brand · core ─────────────────────────────────────── */
  --eg-color-brand-red:        #E80032;
  --eg-color-brand-red-deep:   #C8102E;
  --eg-color-brand-indigo:     #2800BA;
  --eg-color-brand-gradient:   linear-gradient(135deg, #E80032 0%, #2800BA 100%);

  /* ── Ink · neutral dark scale ─────────────────────────── */
  --eg-color-ink:              #0A0A0F;
  --eg-color-ink-2:            #13131C;
  --eg-color-ink-3:            #1C1C28;
  --eg-color-ink-soft:         #2A2A33;
  --eg-color-ink-mute:         #6B6B73;
  --eg-color-ink-faint:        #9A9AA0;

  /* ── Paper · neutral light scale ──────────────────────── */
  --eg-color-paper:            #F5F4F0;
  --eg-color-paper-warm:       #EEEAE0;
  --eg-color-paper-deep:       #E6E1D2;
  --eg-color-rule:             #D8D5CC;
  --eg-color-line-soft:        #ECEAE3;

  /* ── Semantic · feedback ──────────────────────────────── */
  --eg-color-success:          #1A7A3F;
  --eg-color-success-bg:       #DCEFE2;
  --eg-color-warning:          #B8730F;
  --eg-color-warning-bg:       #F8E8CB;
  --eg-color-error:            #C8102E;
  --eg-color-error-bg:         #FAD9DD;
  --eg-color-info:             #1C3AA3;
  --eg-color-info-bg:          #DCE2F2;

  /* ── Data viz · 6-color editorial palette ─────────────── */
  --eg-data-1:                 #E80032;  /* primary signal */
  --eg-data-2:                 #2800BA;  /* gradient end */
  --eg-data-3:                 #0A0A0F;  /* ink */
  --eg-data-4:                 #B8730F;  /* warm */
  --eg-data-5:                 #1A7A3F;  /* growth */
  --eg-data-6:                 #6B6B73;  /* neutral */
  --eg-data-grid:              #ECEAE3;
  --eg-data-axis:              #6B6B73;

  /* ── Typography · families ────────────────────────────── */
  --eg-font-display:           'Figtree', system-ui, sans-serif;
  --eg-font-serif:             'Libre Caslon Text', Georgia, serif;
  --eg-font-body:              'Plus Jakarta Sans', system-ui, sans-serif;
  --eg-font-mono:              'JetBrains Mono', monospace;

  /* ── Type scale · 8 steps ─────────────────────────────── */
  --eg-text-display-xl:        clamp(56px, 8vw, 120px);
  --eg-text-display-l:         clamp(44px, 6.4vw, 84px);
  --eg-text-display-m:         clamp(36px, 5vw, 64px);
  --eg-text-display-s:         clamp(28px, 3.6vw, 44px);
  --eg-text-headline:          clamp(20px, 2.4vw, 28px);
  --eg-text-body-l:            19px;
  --eg-text-body:              17px;
  --eg-text-caption:           13.5px;
  --eg-text-micro:             11.5px;

  /* ── Line height · pairings ───────────────────────────── */
  --eg-leading-tight:          1.04;
  --eg-leading-snug:           1.18;
  --eg-leading-normal:         1.5;
  --eg-leading-relaxed:        1.65;

  /* ── Letter spacing · pairings ────────────────────────── */
  --eg-tracking-tighter:       -.025em;
  --eg-tracking-tight:         -.018em;
  --eg-tracking-normal:        0;
  --eg-tracking-wide:          .12em;
  --eg-tracking-wider:         .18em;
  --eg-tracking-widest:        .22em;

  /* ── Spacing · 4/8 base scale ─────────────────────────── */
  --eg-space-0:                0;
  --eg-space-1:                4px;
  --eg-space-2:                8px;
  --eg-space-3:                12px;
  --eg-space-4:                16px;
  --eg-space-5:                24px;
  --eg-space-6:                32px;
  --eg-space-7:                48px;
  --eg-space-8:                64px;
  --eg-space-9:                96px;
  --eg-space-10:               128px;
  --eg-space-11:               160px;
  --eg-space-12:               200px;

  /* ── Radius · roundness scale ─────────────────────────── */
  --eg-radius-0:               0;
  --eg-radius-1:               2px;
  --eg-radius-2:               4px;
  --eg-radius-3:               6px;
  --eg-radius-4:               8px;
  --eg-radius-5:               12px;
  --eg-radius-pill:            999px;

  /* ── Border · stroke widths ───────────────────────────── */
  --eg-border-1:               1px;
  --eg-border-2:               2px;
  --eg-border-thick:           4px;

  /* ── Shadow · elevation scale ─────────────────────────── */
  --eg-shadow-1:               0 1px 2px rgba(10, 10, 15, .06);
  --eg-shadow-2:               0 4px 12px rgba(10, 10, 15, .07);
  --eg-shadow-3:               0 12px 30px rgba(10, 10, 15, .09);
  --eg-shadow-4:               0 24px 60px rgba(10, 10, 15, .12);
  --eg-shadow-5:               0 40px 120px rgba(10, 10, 15, .18);
  --eg-shadow-glow-red:        0 16px 40px rgba(232, 0, 50, .15);

  /* ── Motion · durations ───────────────────────────────── */
  --eg-motion-micro:           120ms;
  --eg-motion-short:           240ms;
  --eg-motion-medium:          480ms;
  --eg-motion-long:            800ms;
  --eg-motion-cinematic:       1200ms;

  /* ── Motion · easings ─────────────────────────────────── */
  --eg-ease-standard:          cubic-bezier(.4, 0, .2, 1);
  --eg-ease-emphasis:          cubic-bezier(.16, 1, .3, 1);
  --eg-ease-decelerate:        cubic-bezier(0, 0, .2, 1);
  --eg-ease-accelerate:        cubic-bezier(.4, 0, 1, 1);

  /* ── Layout · containers ──────────────────────────────── */
  --eg-container-narrow:       760px;
  --eg-container-default:      1180px;
  --eg-container-wide:         1280px;
  --eg-container-bleed:        100%;

  /* ── Grid · breakpoints ───────────────────────────────── */
  --eg-bp-mobile:              640px;
  --eg-bp-tablet:              900px;
  --eg-bp-desktop:             1200px;
  --eg-bp-wide:                1440px;

  /* ── Z-index · layering ───────────────────────────────── */
  --eg-z-base:                 1;
  --eg-z-sticky:               50;
  --eg-z-overlay:              90;
  --eg-z-modal:                100;
  --eg-z-toast:                200;
}

/* ── Dark theme contract (opt-in via [data-theme="dark"]) ── */
[data-theme="dark"]{
  /* Paper scale — inverted */
  --eg-color-paper:            #0A0A0F;
  --eg-color-paper-warm:       #13131C;
  --eg-color-paper-deep:       #1C1C28;
  /* Ink scale — inverted */
  --eg-color-ink:              #F5F4F0;
  --eg-color-ink-2:            #EEEAE0;
  --eg-color-ink-3:            #D8D5CC;
  --eg-color-ink-soft:         #C7C5BD;
  --eg-color-ink-mute:         #9A9AA0;
  --eg-color-ink-faint:        #6B6B73;
  /* Borders — darker rule on dark bg */
  --eg-color-rule:             #2A2A33;
  --eg-color-line-soft:        #1F1F2A;
  /* Brand red slightly punchier on dark */
  --eg-color-brand-red:        #FF1F47;
  --eg-color-brand-red-deep:   #E80032;
  /* Shadows weaker on dark surfaces */
  --eg-shadow-1:               0 1px 2px rgba(0, 0, 0, .35);
  --eg-shadow-2:               0 4px 12px rgba(0, 0, 0, .42);
  --eg-shadow-3:               0 12px 30px rgba(0, 0, 0, .48);
  --eg-shadow-4:               0 24px 60px rgba(0, 0, 0, .55);
  --eg-shadow-5:               0 40px 120px rgba(0, 0, 0, .65);
  --eg-shadow-glow-red:        0 16px 40px rgba(255, 31, 71, .25);
}