/* ============================================================================
   Eternal Evals — Design Tokens (single source of truth)
   ----------------------------------------------------------------------------
   This file is the ONE place colors, type, spacing, motion, etc. are defined.
   It is loaded first (via @import at the top of style.css, and a <link> in
   chart.html) so every surface shares the same language.

   How to use:
     • Reach for a SEMANTIC token first  → var(--text-muted), var(--space-4)
     • Primitives (the --c-* / raw ramps) are the source values; avoid using
       them directly in components — prefer the semantic names so a single
       value change re-themes the whole product.
     • LEGACY ALIASES (bottom) keep the two historic naming families working
       (style.css used --accent-gold/--text-muted; chart.html used --gold/
       --muted/--head/--mono). New code: use the canonical semantic names.

   Known drifts pending deliberate reconciliation (do NOT silently merge —
   they change visuals and need an eyeball pass):
     • muted text: #8e8e93 (site) vs rgba(255,255,255,.58) (workspace)
         → exposed as --text-muted and --text-muted-soft
     • hairline border: .04 (site) vs .07 (workspace)
         → exposed as --border-hairline and --border-soft
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ---- 1. PRIMITIVES · color ---------------------------------------------
     Raw values. The product's whole palette derives from a near-black void,
     a single gold accent, an iOS-style neutral gray ramp, and a few status
     hues. Add ramp steps here, never ad-hoc hex in components. */

  /* Void / surface blacks */
  --c-black-900: #020205;          /* deepest background */
  --c-black-850: #040407;          /* legacy texts.css fallback black */
  --c-black-800: #06060e;          /* panel base */
  --c-black-700: #0c0c10;          /* glass panel base */

  /* Neutral (text + lines), iOS system gray family */
  --c-white:     #ffffff;
  --c-gray-050:  #f2f2f7;          /* primary text */
  --c-gray-400:  #8e8e93;          /* muted text */

  /* Gold — the single brand accent */
  --c-gold-300:  #f0d9a0;
  --c-gold-400:  #e2c079;          /* canonical accent */
  --c-gold-500:  #d4af37;          /* deeper / pressed */

  /* Status */
  --c-cyan-400:  #5ac8fa;
  --c-green-400: #50dc64;
  --c-red-400:   #ff5046;

  /* ---- 2. SEMANTIC · color ----------------------------------------------- */

  /* Backgrounds & surfaces */
  --bg-void:        var(--c-black-900);
  --surface-panel:  rgba(6, 6, 14, 0.94);
  --surface-glass:  rgba(12, 12, 16, 0.45);

  /* Text */
  --text-primary:    var(--c-gray-050);
  --text-muted:      var(--c-gray-400);              /* site standard */
  --text-muted-soft: rgba(255, 255, 255, 0.58);      /* workspace variant */

  /* Accent */
  --accent-gold:      var(--c-gold-400);
  --accent-gold-strong: var(--c-gold-300);
  --accent-gold-dim:  rgba(226, 192, 121, 0.15);
  --accent-gold-faint: rgba(226, 192, 121, 0.12);
  --accent-cyan:      var(--c-cyan-400);

  /* Status (semantic) */
  --status-positive: rgba(80, 220, 100, 0.85);
  --status-negative: rgba(255, 80, 70, 0.85);

  /* Borders / hairlines */
  --border-hairline: rgba(255, 255, 255, 0.04);      /* site standard */
  --border-soft:     rgba(255, 255, 255, 0.07);      /* workspace variant */
  --border-accent:   rgba(226, 192, 121, 0.22);

  /* ---- 3. TYPOGRAPHY ----------------------------------------------------- */
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* Modular scale (~1.2). rem-based so it respects user zoom. */
  --text-2xs:  0.62rem;
  --text-xs:   0.68rem;
  --text-sm:   0.78rem;
  --text-base: 0.9rem;
  --text-md:   1rem;
  --text-lg:   1.25rem;
  --text-xl:   1.6rem;
  --text-2xl:  1.9rem;
  --text-3xl:  2.6rem;
  --text-hero: clamp(2.2rem, 5vw, 3.4rem);

  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;

  --leading-tight: 1.2;
  --leading-snug:  1.4;
  --leading-body:  1.65;

  --tracking-tight: -0.01em;
  --tracking-wide:  0.05em;
  --tracking-caps:  0.12em;   /* uppercase kickers / labels */

  /* ---- 4. SPACING (4px base) --------------------------------------------- */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4  */
  --space-2: 0.5rem;    /* 8  */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */
  --space-9: 6rem;      /* 96 */

  /* ---- 5. RADIUS --------------------------------------------------------- */
  --radius-xs:    4px;
  --radius-sm:    7px;
  --radius-md:    10px;
  --radius-lg:    16px;
  --radius-xl:    24px;
  --radius-pill:  999px;
  --radius-circle:50%;

  /* ---- 6. ELEVATION · shadow + glow -------------------------------------- */
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md:  0 6px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg:  0 20px 60px rgba(0, 0, 0, 0.55);
  --glow-gold:  0 0 24px rgba(226, 192, 121, 0.28);

  /* Glass blur radii (backdrop-filter) */
  --blur-sm: 6px;
  --blur-md: 14px;
  --blur-lg: 24px;

  /* ---- 7. MOTION --------------------------------------------------------- */
  --dur-fast:  0.12s;
  --dur:       0.2s;
  --dur-slow:  0.4s;
  --dur-slower:0.8s;

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);     /* decelerate — UI enters */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* slight overshoot */

  /* ---- 8. Z-INDEX (named scale — stop guessing 9999) --------------------- */
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  400;
  --z-drawer:   500;
  --z-modal:    600;
  --z-toast:    800;
  --z-tooltip:  900;

  /* ---- 9. LAYOUT --------------------------------------------------------- */
  --maxw-prose:   720px;   /* legal / texts reading column */
  --maxw-content: 1080px;  /* standard page */
  --maxw-wide:    1280px;  /* dashboards / wide grids */

  /* ============================================================================
     LEGACY ALIASES — keep historic names resolving against the system.
     Prefer the canonical semantic names above in NEW code.
     ========================================================================== */

  /* chart.html / texts.css family */
  --gold:      var(--accent-gold);
  --gold-dim:  var(--accent-gold-faint);
  --bg:        var(--bg-void);
  --panel:     var(--surface-panel);
  --muted:     var(--text-muted);
  --border:    var(--border-soft);
  --green:     var(--status-positive);
  --red:       var(--status-negative);
  --head:      var(--font-heading);
  --mono:      var(--font-mono);

  /* style.css family (already canonical, listed for completeness) */
  --glass-panel:  var(--surface-glass);
  --glass-border: var(--border-hairline);
}