/* ==========================================================================
   Elucidate — canonical design tokens
   Single source of truth for the "agentic platform" design language.

   HOW TO USE: link this file, then reference the variables below. Never paste
   a raw hex value that already has a token. Run `npm run lint:tokens` to check.
   Full conventions + component atoms: see STYLE.md. Live visual reference:
   design-system/index.html (browse locally; it is not deployed).

   ONE system, TWO themes that SHARE the same accent palette — swap the
   neutrals, keep the accents:
     - Dark navy  (--eh-navy bg,  --eh-white text) — product / hero / marketing
     - Warm paper (--eh-paper bg, --eh-ink  text) — editorial / long-form / forms

   Legacy Webflow pages do NOT use these tokens and are frozen. Leave them.
   ========================================================================== */

:root {
  /* ── Accents — shared by BOTH themes ─────────────────────────────────── */
  --eh-ember:          #ea580c;  /* PRIMARY action / CTA. The only button colour. */
  --eh-ember-bright:   #fb923c;  /* CTA gradient end, eyebrow accent, input focus */
  --eh-ember-soft:     #fed7aa;  /* soft highlight, inline <code> background */
  --eh-ember-deep:     #b8430f;  /* darker ember: gradient dark stop (e.g. numerals) */
  --eh-terracotta:     #b8442a;  /* editorial accent — warm-paper long-form pages only, never an action/CTA colour */
  --eh-blue-bright:    #2d5aff;  /* decorative / glow ONLY — never an action colour */
  --eh-blue-glow:      #4d7aff;  /* decorative blue — glows, gradient stops */
  --eh-blue-light:     #8aadff;  /* decorative blue — .is-blue accent text/eyebrow */
  --eh-cyan:           #00d4ff;  /* signal: info / live */
  --eh-mint:           #00e676;  /* signal: success */

  /* ── Dark theme — navy surfaces, light text ──────────────────────────── */
  --eh-navy-deep:      #060a22;               /* deepest navy — gradient dark stop */
  --eh-navy:           #0a0e2a;               /* page background */
  --eh-navy-mid:       #111a4a;               /* mid navy — gradient stop */
  --eh-navy-soft:      #1a2456;               /* raised navy surface (cards on navy) */
  --eh-white:          #ffffff;               /* body text */
  --eh-white-muted:    rgba(255,255,255,0.72);/* secondary text, leads */
  --eh-white-dim:      rgba(255,255,255,0.5); /* labels, placeholders, captions */
  --eh-white-faint:    rgba(255,255,255,0.28);/* dashed underlines, faint separators */
  --eh-rule:           rgba(255,255,255,0.08);/* hairline divider / card border */
  --eh-rule-strong:    rgba(255,255,255,0.16);/* input underline, stronger rule */

  /* ── Warm-paper theme — cream surfaces, ink text ─────────────────────── */
  --eh-paper:          #fbfaf6;               /* page background */
  --eh-paper-2:        #f3efe6;               /* offset band */
  --eh-cream:          #fdf8f3;               /* raised card / form surface */
  --eh-ink:            #0b1430;               /* body text */
  --eh-ink-2:          #1d2748;               /* softened body text — between --eh-ink and --eh-ink-soft (.elu-text) */
  --eh-ink-soft:       #4a5573;               /* secondary text */
  --eh-ink-rule:        rgba(11,20,48,0.12);  /* hairline divider on paper */
  --eh-ink-rule-strong: rgba(11,20,48,0.28);  /* stronger rule on paper */

  /* ── Type — three families, distinct roles ───────────────────────────── */
  --eh-font-body:      'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --eh-font-serif:     'Fraunces', Georgia, 'Times New Roman', serif; /* display <em> accent only */
  --eh-font-mono:      'Space Mono', ui-monospace, Menlo, monospace;  /* eyebrows, labels, code */

  /* ── Radius ───────────────────────────────────────────────────────────── */
  --eh-radius-xs:      4px;     /* editorial photo/video frames, tightest tag chips */
  --eh-radius-sm:      6px;     /* chips, small meta */
  --eh-radius-md:      12px;    /* buttons */
  --eh-radius-lg:      20px;    /* cards */
  --eh-radius-pill:    999px;   /* badges, pills */

  /* ── Motion ───────────────────────────────────────────────────────────────
     Only the easing is tokenized — it recurs with intent. Durations are
     ad-hoc across pages and NOT tokenized; the convention (~.15s for colour/
     border state, ~.35s for transforms) lives in STYLE.md. See STYLE.md §Motion. */
  --eh-ease:           cubic-bezier(.22, .61, .36, 1);  /* smooth default */
}