/* ════════════════════════════════════════════════════════════════════
   STORM STREAM · "THE SWEEP" THEME
   The single source of truth for the living-radar look: a phosphor-green
   scope on storm-night navy. Loaded AFTER tokens.css so it overrides it.

   It defines the new token names (--bg, --ink, --accent, --sev-*) used by
   the funnel, AND remaps every legacy Vyan-Evolved token (--obsidian,
   --ember, --platinum, ...) to the new values, so any surface that still
   speaks the old tokens (the control console, the map app) re-skins to
   The Sweep just by including this file.

   Three saturated jobs, never blurred: green = go/action, red = live/danger,
   amber = scarcity. The six-stop severity ramp is DATA only.
   ════════════════════════════════════════════════════════════════════ */

/* ── self-hosted OFL faces (subset woff2, no remote requests) ── */
@font-face { font-family: "Saira Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/saira-condensed-600.woff2") format("woff2"); }
@font-face { font-family: "Saira Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/saira-condensed-700.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/hanken-grotesk-400.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/hanken-grotesk-500.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/hanken-grotesk-600.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-500.woff2") format("woff2"); }

/* ══ DARK (storm-night navy, primary) ══ */
:root {
  /* new-name system tokens (used by the funnel) */
  --bg: #060C15;
  --surface: #0C1826;
  --surface-2: #12202F;
  --line: rgba(120,160,200,.14);
  --line-hi: rgba(120,160,200,.28);
  --ink: #E9F1F7;
  --ink-dim: #9DB0C2;
  --ink-faint: #5E7183;
  --accent: #33E5A0;
  --accent-ink: #04120B;
  --accent-hi: #5CF2B8;
  --live: #F5424B;
  --live-ink: #FFFFFF;
  --scarcity: #FFB020;
  --sev-1: #38BFE8;
  --sev-2: #33E5A0;
  --sev-3: #FFC53D;
  --sev-4: #FF7A3C;
  --sev-5: #F5424B;
  --sev-6: #E85BD0;
  --scrim: rgba(6,12,21,.62);

  /* fonts */
  --disp: "Saira Condensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --body: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* geometry, ascending scale */
  --r-media: 16px; --r-card: 16px; --r-card-lg: 20px; --r-control: 12px; --r-inner: 9px; --r-chip: 9px; --r-pill: 999px; --r-deck: 20px;
  /* motion */
  --m-fast: .16s; --m-base: .28s; --m-enter: .5s;
  --ease: cubic-bezier(.4,0,.2,1); --ease-spring: cubic-bezier(.34,1.56,.64,1); --ease-out: cubic-bezier(.16,1,.3,1);
  /* layout */
  --max-w: 1160px; --gutter: 22px;
  --header-bg: rgba(6,12,21,.82);
  --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 42%, transparent);
  --tint-accent: color-mix(in srgb, var(--accent) 12%, transparent);
  --tint-accent-2: color-mix(in srgb, var(--accent) 20%, transparent);
  --tint-scarcity: color-mix(in srgb, var(--scarcity) 12%, transparent);
  --tint-live: color-mix(in srgb, var(--live) 14%, transparent);

  /* ── legacy Vyan-Evolved token remaps (so old surfaces re-skin) ── */
  --obsidian: var(--bg);
  --graphite: var(--surface);
  --graphite-2: #0A1420;
  --graphite-3: var(--surface-2);
  --hairline: rgba(120,160,200,.07);
  --platinum: var(--ink);
  --plat-dim: var(--ink-dim);
  --plat-faint: #90A2B4;             /* AA small text on the navy surfaces */
  --ghost: var(--surface);
  --ember: var(--accent);            /* the earned accent is now phosphor green */
  --ember-hi: var(--accent-hi);
  --ember-deep: #1E9E6B;
  --ember-ink: var(--accent-ink);
  --green: var(--accent);
  --green-ink: var(--accent-ink);
  --amber: var(--scarcity);
  --amber-ink: #2A1C00;
  --red: var(--live);
  --red-ink: #FFFFFF;
  --trust: var(--sev-1);
  --trust-ink: #04222E;
  --red-text: #FF7A7F;
  --trust-text: #6FD3F0;
  --grad-ember: linear-gradient(90deg, var(--accent-hi), var(--accent));
  --grad-ember-deep: linear-gradient(135deg, #7BF0C4 0%, #33E5A0 45%, #1E9E6B 100%);
  --grad-plat: linear-gradient(135deg, #FFFFFF 0%, #C7D6E4 55%, #90A2B4 100%);
  --tint-ember: var(--tint-accent);
  --tint-ember-2: var(--tint-accent-2);
  --tint-active: color-mix(in srgb, var(--accent) 14%, transparent);
  --tint-green: color-mix(in srgb, var(--accent) 14%, transparent);
  --tint-amber: var(--tint-scarcity);
  --tint-red: var(--tint-live);
  --tint-trust: color-mix(in srgb, var(--sev-1) 14%, transparent);
  --tint-warm: color-mix(in srgb, var(--accent) 5%, transparent);
  --tint-hover: rgba(120,160,200,.05);
  --tint-row: rgba(120,160,200,.025);
  --ring-ember: var(--ring);
  --e-ember: 0 6px 22px -6px color-mix(in srgb, var(--accent) 45%, transparent);
  --glow-ember: 0 0 24px color-mix(in srgb, var(--accent) 40%, transparent);
}

/* ══ LIGHT (a genuine daytime-storm slate, never paper-and-gold) ══ */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #DDE6EE;
    --surface: #EAF0F6;
    --surface-2: #F2F6FA;
    --line: rgba(30,58,88,.16);
    --line-hi: rgba(30,58,88,.30);
    --ink: #0E1A26;
    --ink-dim: #3D4E5E;
    --ink-faint: #667888;
    --accent: #0E9E63;                /* darkened phosphor for AA on slate */
    --accent-ink: #FFFFFF;
    --accent-hi: #0A854F;
    --live: #CE2129;
    --live-ink: #FFFFFF;
    --scarcity: #9A5E00;
    --scrim: rgba(210,222,232,.5);
    --header-bg: rgba(221,230,238,.86);
    --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 34%, transparent);
    --tint-accent: color-mix(in srgb, var(--accent) 12%, transparent);
    --tint-accent-2: color-mix(in srgb, var(--accent) 18%, transparent);
    --tint-scarcity: color-mix(in srgb, var(--scarcity) 14%, transparent);
    --tint-live: color-mix(in srgb, var(--live) 12%, transparent);

    /* legacy remaps, light */
    --obsidian: var(--bg);
    --graphite: var(--surface);
    --graphite-2: #E3EBF2;
    --graphite-3: var(--surface-2);
    --hairline: rgba(30,58,88,.08);
    --platinum: var(--ink);
    --plat-dim: var(--ink-dim);
    --plat-faint: #5A6B7B;
    --ghost: var(--surface);
    --ember: var(--accent);
    --ember-hi: var(--accent-hi);
    --ember-deep: #0A6B41;
    --ember-ink: #FFFFFF;
    --green: var(--accent);
    --green-ink: #FFFFFF;
    --amber: var(--scarcity);
    --amber-ink: #FFFFFF;
    --red: var(--live);
    --red-ink: #FFFFFF;
    --trust: #1E7FA8;
    --trust-ink: #FFFFFF;
    --red-text: #CE2129;
    --trust-text: #1E7FA8;
    --grad-ember: linear-gradient(90deg, #0A854F, #0E9E63);
    --grad-ember-deep: linear-gradient(135deg, #12B071 0%, #0E9E63 45%, #0A6B41 100%);
    --grad-plat: linear-gradient(135deg, #1E2A36 0%, #43545F 55%, #667888 100%);
    --tint-ember: var(--tint-accent);
    --tint-ember-2: var(--tint-accent-2);
    --tint-active: color-mix(in srgb, var(--accent) 14%, transparent);
    --tint-green: color-mix(in srgb, var(--accent) 14%, transparent);
    --tint-amber: var(--tint-scarcity);
    --tint-red: var(--tint-live);
    --tint-trust: color-mix(in srgb, #1E7FA8 12%, transparent);
    --tint-warm: color-mix(in srgb, var(--accent) 5%, transparent);
    --tint-hover: rgba(30,58,88,.05);
    --tint-row: rgba(30,58,88,.025);
    --ring-ember: var(--ring);
    --e-ember: 0 6px 22px -6px color-mix(in srgb, var(--accent) 35%, transparent);
    --glow-ember: 0 0 24px color-mix(in srgb, var(--accent) 30%, transparent);
  }
}