/* ============================================================
   COLORS — warm stone base + era-mapped muted accents
   Dark, muted so the work shines. Accents used sparingly:
   lines, dots, a single word — never large fills.
   ============================================================ */

:root {
  /* --- Base: warm stone, dark (Tailwind stone scale) --- */
  --stone-950: #0C0A09;
  --stone-900: #1C1917;
  --stone-800: #292524;
  --stone-700: #44403C;
  --stone-500: #78716C;
  --stone-400: #A8A29E;
  --stone-300: #D6D3D1;
  --stone-100: #F5F5F4;

  /* --- Semantic surfaces --- */
  --bg: #0C0A09;          /* page background */
  --surface: #1C1917;     /* cards, raised panels */
  --surface-2: #292524;   /* insets, terminal */
  --border: #44403C;      /* hairline rules */

  /* raised / translucent surfaces (used with backdrop-blur) */
  --surface-glass: rgba(28, 25, 23, 0.72);
  --surface-hover: #211d1b;

  /* --- Semantic text --- */
  --text: #F5F5F4;        /* headings */
  --text-body: #D6D3D1;   /* body */
  --text-muted: #A8A29E;  /* captions */
  --text-faint: #78716C;  /* eyebrows, meta */

  /* --- Era accents (complementary, muted) --- */
  --teal: #5EAAA8;        /* Era 1 · prefill · the bandwidth wall */
  --amber: #E0A458;       /* Era 2 · decode · the per-CTA wall */
  --clay: #C97B63;        /* Era 3 · frontier · precision / architecture */

  /* --- Data-series accents --- */
  --sage: #9CA986;        /* extra chart series / the "win" */
  --violet: #9B8CC0;      /* extra chart series */
  --danger: #B45E4D;      /* dead ends — the four NULL results */

  /* --- Semantic aliases for era mapping --- */
  --era-prefill: var(--teal);
  --era-decode: var(--amber);
  --era-frontier: var(--clay);
  --accent: var(--amber);        /* default single accent */
  --accent-win: var(--sage);
  --accent-miss: var(--stone-400);
  --accent-deadend: var(--danger);

  /* --- Translucent accent tints (hairlines, glows, chip fills) --- */
  --teal-12: rgba(94, 170, 168, 0.12);
  --teal-24: rgba(94, 170, 168, 0.24);
  --amber-12: rgba(224, 164, 88, 0.12);
  --amber-24: rgba(224, 164, 88, 0.24);
  --clay-12: rgba(201, 123, 99, 0.12);
  --clay-24: rgba(201, 123, 99, 0.24);
  --sage-12: rgba(156, 169, 134, 0.12);
  --danger-12: rgba(180, 94, 77, 0.12);

  /* Focus ring — teal per accessibility spec */
  --focus-ring: rgba(94, 170, 168, 0.65);
}