/* nash_tokens.css — reference token sheet for the Nash component library.
   Documents the marketing-site CSS custom properties that nash_status_badge,
   nash_kpi_cell, nash_table (and the rest of the library) read from. Pages
   that already define these tokens at :root and [data-theme="light"] keep
   their values; this file fills in any that aren't set yet so components
   work on bare pages too.

   Three categories of token:
     1. Surface / text — bg/surface/border/text levels. Theme-flip.
     2. Accent — flips: chartreuse #c9ff00 (dark) → dark blue #314868 (light).
        Use for any UI accent that should NOT stay chartreuse in light mode.
     3. Signal — stays chartreuse #c9ff00 in BOTH themes. Use sparingly:
        a single eyebrow, a single live-dot, a single hover line. Never as
        a fill, gradient, body text, em, stat number, or table cell value.
        See CLAUDE.md → "Hard rule 1: Chartreuse is signal-only."

   The *-rgb tokens are numeric "r,g,b" triples for use inside rgba(),
   so a tint can flip with theme: rgba(var(--nash-accent-rgb), 0.08).
*/

/* Default :root provides dark; the explicit [data-theme="dark"] selector
   lets a sub-tree force dark inside a light parent (used by snapshot
   pages to render dark + light side by side). */
:where(:root),
[data-theme="dark"] {
  /* Surface levels (dark) */
  --nash-bg: #01051E;
  --nash-surface: #111a2e;
  --nash-surface-2: #151f35;
  --nash-surface-3: #1d2944;

  /* Borders */
  --nash-border: rgba(255,255,255,0.06);
  --nash-border-2: rgba(255,255,255,0.12);

  /* Text levels */
  --nash-text: #FFFFFF;
  --nash-text-2: #B1C4DC;
  --nash-text-3: rgba(177,196,220,0.62);
  --nash-text-4: rgba(177,196,220,0.35);

  /* Accent — theme-flips (chartreuse in dark, dark blue in light). */
  --nash-accent: #c9ff00;
  --nash-accent-rgb: 201, 255, 0;

  /* Signal — stays chartreuse in BOTH themes. Signal-only contexts. */
  --nash-signal: #c9ff00;
  --nash-signal-rgb: 201, 255, 0;
  --nash-signal-bg: rgba(201,255,0,0.12);

  /* Status / semantic colors — kept consistent across themes so that
     status badges read the same regardless of mode. */
  --nash-status-blue: #60a5fa;
  --nash-status-blue-bg: rgba(96,165,250,0.12);
  --nash-status-amber: #f59e0b;
  --nash-status-amber-bg: rgba(245,158,11,0.14);
  --nash-status-amber-border: rgba(245,158,11,0.30);
  --nash-status-green: #22c55e;
  --nash-status-green-bg: rgba(34,197,94,0.14);
  --nash-status-green-border: rgba(34,197,94,0.30);
  --nash-status-red: #ef4444;
  --nash-status-red-bg: rgba(239,68,68,0.14);
  --nash-status-red-border: rgba(239,68,68,0.30);

  /* Type families */
  --font-display: 'Host Grotesk', 'Inter', system-ui, sans-serif;
  --font-mono: 'Geist Mono', 'SF Mono', ui-monospace, Menlo, monospace;
}

[data-theme="light"],
body.light {
  --nash-bg: #F8FAFC;
  --nash-surface: #FFFFFF;
  --nash-surface-2: #f0f2f5;
  --nash-surface-3: #E5EDF6;

  --nash-border: rgba(1,5,30,0.08);
  --nash-border-2: rgba(1,5,30,0.16);

  --nash-text: #01051E;
  --nash-text-2: #314868;
  --nash-text-3: rgba(1,5,30,0.48);
  --nash-text-4: rgba(1,5,30,0.28);

  /* Accent flips to dark blue (#314868) in light mode. */
  --nash-accent: #314868;
  --nash-accent-rgb: 49, 72, 104;

  /* Signal stays chartreuse, but its bg-tint shifts to a colder, lower
     opacity so the chartreuse dot reads as a signal rather than a glare. */
  --nash-signal-bg: rgba(201,255,0,0.15);

  /* Status semantics keep their hue in light mode but darken text slightly
     for AA contrast on white. The bg tints dim because they read brighter
     against light surfaces. */
  --nash-status-blue: #2563eb;
  --nash-status-blue-bg: rgba(37,99,235,0.10);
  --nash-status-amber: #b45309;
  --nash-status-amber-bg: rgba(180,83,9,0.10);
  --nash-status-amber-border: rgba(180,83,9,0.28);
  --nash-status-green: #15803d;
  --nash-status-green-bg: rgba(21,128,61,0.10);
  --nash-status-green-border: rgba(21,128,61,0.28);
  --nash-status-red: #b91c1c;
  --nash-status-red-bg: rgba(185,28,28,0.10);
  --nash-status-red-border: rgba(185,28,28,0.28);
}