/* ============================================================================
   Evolution Biolabs — Design Tokens (portable source of truth)
   Phase 3. These exact values feed WordPress theme.json in Phase 6.
   Palette + ratios from eb_colour_palette.css / Brand Guidelines §8.
   ========================================================================== */
:root {
  /* ---- Raw brand palette ---- */
  --eb-black:        #0F0E0C;
  --eb-charcoal:     #191714;
  --eb-gold:         #D5A850;
  --eb-gold-antique: #A27837;
  --eb-gold-champ:   #F2DFA1;
  --eb-gold-ink:     #8C6520;   /* AA-safe gold for small text on light (>=4.5:1) */
  --eb-white:        #F7F4EE;
  --eb-silver:       #DAD7D1;
  --eb-grey:         #5D5B58;
  --eb-grey-ondark:  #96938E;   /* AA-safe muted grey for small text on dark (>=4.9:1) */
  --eb-blue:         #2B679A;   /* micro-accent: verification only */
  --eb-green:        #6FA64A;   /* micro-accent: success only */

  /* ---- Semantic surfaces ---- */
  --surface:         var(--eb-white);   /* primary reading/commerce surface */
  --surface-2:       #FBFAF6;           /* raised white (cards on white) */
  --surface-dark:    var(--eb-black);   /* brand-impact areas */
  --surface-panel:   var(--eb-charcoal);/* dark panels / technical trust */

  /* ---- Ink ---- */
  --ink:             var(--eb-black);
  --ink-muted:       var(--eb-grey);
  --ink-muted-dark:  var(--eb-grey-ondark); /* muted text on dark surfaces */
  --ink-invert:      var(--eb-white);
  --ink-muted-invert:var(--eb-silver);

  /* ---- Lines (hairlines, no shadow reliance) ---- */
  --line:            rgba(15,14,12,.14);
  --line-strong:     rgba(15,14,12,.28);
  --line-invert:     rgba(247,244,238,.16);
  --line-gold:       rgba(213,168,80,.55);

  /* ---- Accent roles ---- */
  --accent:          var(--eb-gold);        /* focus, rules, key actions */
  --accent-strong:   var(--eb-gold-antique);/* hover / pressed (non-text UI) */
  --gold-text:       var(--eb-gold-ink);    /* small gold TEXT on light; flipped inside .on-dark */
  --accent-hi:       var(--eb-gold-champ);  /* rare highlight */
  --verify:          var(--eb-blue);        /* real verification state ONLY */
  --success:         var(--eb-green);       /* real success state ONLY */
  --danger:          #9A3B2B;               /* form errors (kept off-brand-red, muted) */

  /* ---- Focus ring ---- */
  --focus-ring:      0 0 0 2px var(--eb-black), 0 0 0 4px var(--eb-gold);
  --focus-ring-dark: 0 0 0 2px var(--eb-white), 0 0 0 4px var(--eb-gold);

  /* ---- Typography ---- */
  --font-display: "Cinzel", "Georgia", "Times New Roman", serif;   /* rare impact */
  --font-ui:      "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Fluid type scale (min .. max), 320px..1440px */
  --step--1: clamp(0.8125rem, 0.79rem + 0.11vw, 0.875rem);  /* 13–14 spec/mono */
  --step-0:  clamp(1rem, 0.96rem + 0.18vw, 1.125rem);       /* 16–18 body */
  --step-1:  clamp(1.125rem, 1.06rem + 0.3vw, 1.375rem);    /* 18–22 subhead */
  --step-2:  clamp(1.375rem, 1.24rem + 0.6vw, 1.75rem);     /* 22–28 */
  --step-3:  clamp(1.75rem, 1.5rem + 1.1vw, 2.125rem);      /* 28–34 */
  --step-4:  clamp(2.125rem, 1.7rem + 1.9vw, 2.75rem);      /* 34–44 section */
  --step-5:  clamp(2.5rem, 1.9rem + 2.9vw, 3.5rem);         /* 40–56 */
  --step-6:  clamp(2.75rem, 1.9rem + 4.2vw, 4.5rem);        /* 44–72 hero display */

  --lh-tight: 1.02;
  --lh-snug:  1.16;
  --lh-body:  1.62;
  --tracking-mono: 0.06em;
  --tracking-caps: 0.14em;

  /* ---- Space scale (4px base) ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px;

  /* ---- Radius (max 8px; most objects square) ---- */
  --r-0: 0px; --r-1: 2px; --r-2: 4px; --r-3: 8px;

  /* ---- Grid ---- */
  --cols: 12;
  --gutter: clamp(16px, 2.2vw, 28px);
  --page-max: 1440px;
  --content-max: 1200px;
  --measure: 68ch;
  --pad-x: clamp(16px, 4.5vw, 64px);

  /* ---- Borders ---- */
  --bw: 1px;
  --bw-2: 2px;

  /* ---- Motion (communicates state only) ---- */
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 320ms;
  --ease: cubic-bezier(.2,.6,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  /* ---- Elevation (used sparingly: drawers/toasts only) ---- */
  --shadow-drawer: -1px 0 0 var(--line-strong), -24px 0 48px rgba(15,14,12,.18);
  --shadow-pop: 0 1px 0 var(--line-strong), 0 16px 40px rgba(15,14,12,.16);

  /* ---- Z-index ---- */
  --z-header: 100;
  --z-drawer: 300;
  --z-overlay: 290;
  --z-toast: 400;

  /* ---- Header heights ---- */
  --header-h: 68px;
  --header-h-mobile: 56px;
  --stickybar-h: 64px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 1ms; --dur: 1ms; --dur-slow: 1ms; }
}