/* ── tokens.css — Frayth design system ("Signal"). ───────────────────────────
 * Rearchitected to a committed, premium, near-brutalist dark canvas with ONE
 * saturated accent — the Mothership-grade restraint bar (docs/MOTHERSHIP.md).
 * Their accent is electric lime; ours is a warm SIGNAL AMBER-GOLD — freight at
 * night, sodium-lit highways, money in motion. Distinct, never a clone.
 *
 * The whole system: one committed dark, one loud color, heavy grotesque type,
 * a faint dotted-grid texture, exactly one primary action per screen. Every
 * value lives here (white-label = swap this file). No component hardcodes a
 * brand/accent hex — every amber, signal, ok/stop, and on-fill ink resolves
 * through a token below, so a re-theme flows through the whole app (and the
 * map, via getComputedStyle in load-map.js). Only a few decorative neutral
 * hexes (device-frame greys, the black App Store badge) remain inline.
 * ──────────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Canvas ramp — committed near-black, warm-neutral (not blue-cold) ─── */
  --bg:          #0b0c0e;   /* app canvas */
  --bg-sunk:     #08090a;   /* wells, map letterbox */
  --panel:       #121418;   /* rails, headers */
  --surface:     #16181d;   /* cards */
  --surface-2:   #1c1f26;   /* raised / hover */
  --surface-3:   #262a32;   /* inputs, popovers */
  --hair:        rgba(255,255,255,0.06);   /* hairline */
  --hair-2:      rgba(255,255,255,0.10);   /* stronger hairline */

  /* ── Signal — the ONE accent. Amber-gold. ────────────────────────────── */
  --signal:      #f5b13c;   /* primary action, brand, "needs you" */
  --signal-hi:   #ffc861;   /* hover / bright */
  --signal-dim:  #b9822a;
  --signal-ink:  #17130a;   /* text on a signal fill */
  --signal-glow: rgba(245,177,60,0.30);
  --signal-soft: rgba(245,177,60,0.12);
  --signal-tint: #ffd98a;   /* light amber — far end of signal text gradients */
  --signal-fill: #ffcf7a;   /* light amber — far end of report/progress bar fills */
  --warn:        #c98a1a;   /* amber warning accent (attention, non-blocking) */

  /* ── Semantics — muted so Signal always leads ────────────────────────── */
  --ok:          #48d494;   /* paid, delivered, gate pass */
  --ok-soft:     rgba(72,212,148,0.12);
  --ok-ink:      #06130c;   /* text on an ok fill (e.g. pickup pin) */
  --stop:        #ff6a5a;   /* gate fail, rejected, danger */
  --stop-soft:   rgba(255,106,90,0.12);
  --stop-ink:    #1a0705;   /* text on a stop fill (e.g. danger button) */
  --info:        #6fa8dc;   /* in-transit, map, informational (steel, not loud) */
  --info-soft:   rgba(111,168,220,0.12);

  /* ── Text ramp ───────────────────────────────────────────────────────── */
  --t0:          #f5f7fa;   /* primary / display */
  --t1:          #b6bcc6;   /* secondary */
  --t2:          #7c828d;   /* muted / labels */
  --t3:          #545a63;   /* faint / disabled */

  /* ── Trust score bands (Signal doubles as "mid/attention") ───────────── */
  --score-hi:    var(--ok);
  --score-mid:   var(--signal);
  --score-lo:    var(--stop);

  /* ── Type — heavy grotesque display + neutral UI + mono data ─────────── */
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;
  --fs-xs: 11px;  --fs-sm: 12.5px; --fs-md: 14px;  --fs-lg: 16px;
  --fs-xl: 20px;  --fs-2xl: 28px;  --fs-3xl: 40px; --fs-4xl: 60px;

  /* ── Geometry ────────────────────────────────────────────────────────── */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 72px;

  /* ── Elevation — deep, tight shadows on black ────────────────────────── */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.5);
  --shadow-2: 0 8px 24px rgba(0,0,0,0.5);
  --shadow-3: 0 24px 60px rgba(0,0,0,0.6);
  --glow: 0 0 0 1px var(--signal-soft), 0 8px 30px var(--signal-glow);

  --ease: cubic-bezier(0.22, 0.7, 0.2, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur: 180ms;

  /* Signature texture — a faint engineered dotted grid in the negative space,
     the Mothership "technical black" cue. Applied to <body>. */
  --dots: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.035) 1px, transparent 0);
  --dots-size: 26px 26px;
}