/* ─────────────────────────────────────────────────────────────────
 * NZIPL Mexico — Consolidated Design Tokens
 * Single source of truth for shell + map iframe + play cards.
 * Drop into both files via <link rel="stylesheet" href="design/tokens.css">.
 *
 * Migration map (legacy → new):
 *   Shell:  --cice-bg     → --bg-1
 *           --cice-nav    → --bg-2
 *           --cice-text   → --fg-1
 *           --cice-muted  → --fg-3
 *           --cice-border → --line-2
 *           --cice-green  → --accent
 *
 *   Map:    --bg          → --bg-1
 *           --bg-raised   → --bg-2
 *           --card        → --bg-3
 *           --text        → --fg-1
 *           --text-soft   → --fg-2
 *           --muted       → --fg-3
 *           --dim/--faint → --fg-4
 *           --border      → --line-2
 *           --border-subtle → --line-1
 *           --border-panel  → --line-3
 *           --green       → --clean   (was #35b38a / #56a360, now #3eaf6f)
 *           --red         → --fossil
 *           --orange      → --mixed
 *           --steel       → --info
 * ────────────────────────────────────────────────────────────── */

:root {
  /* ── Surfaces (4-step ramp, dark to dark-er) ───────────────── */
  --bg-0:        #07090c;
  --bg-1:        #0b0e11;
  --bg-2:        #11151a;
  --bg-3:        #161b22;
  --bg-elev:     rgba(11,14,17,0.92);

  /* ── Hairlines ────────────────────────────────────────────── */
  --line-1:      rgba(255,255,255,0.04);
  --line-2:      rgba(255,255,255,0.08);
  --line-3:      rgba(255,255,255,0.14);
  --line-glow:   rgba(62,175,111,0.35);

  /* ── Foreground (dark-mode text scale) ────────────────────── */
  --fg-1:        #eef1f4;
  --fg-2:        #c8ced6;
  --fg-3:        #8b94a0;
  --fg-4:        #5a626d;
  --fg-5:        #3a4049;

  /* ── Semantic accent (locked: green=clean, red=fossil, amber=mixed) */
  --clean:       #3eaf6f;
  --clean-soft:  rgba(62,175,111,0.12);
  --clean-line:  rgba(62,175,111,0.32);

  --mixed:       #d99a3f;
  --mixed-soft:  rgba(217,154,63,0.12);
  --mixed-line:  rgba(217,154,63,0.32);

  --fossil:      #d65555;
  --fossil-soft: rgba(214,85,85,0.12);
  --fossil-line: rgba(214,85,85,0.32);

  --info:        #5b8db8;
  --info-soft:   rgba(91,141,184,0.12);

  --accent:      var(--clean);

  /* ── Voltage (transmission line styling) ───────────────────── */
  --kv-400:      #ff6b6b;
  --kv-230:      #ffd93d;
  --kv-dc:       #b794f4;
  --kv-sub:      #6bcb77;

  /* ── Typography ────────────────────────────────────────────── */
  --font-display: 'Space Grotesk', 'Archivo', system-ui, sans-serif;
  --font-body:    'Source Sans 3', -apple-system, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', 'Menlo', monospace;

  --t-display-1: 700 28px/1.15 var(--font-display);
  --t-display-2: 700 22px/1.20 var(--font-display);
  --t-display-3: 600 16px/1.25 var(--font-display);

  --t-label-1:   600 11px/1.2 var(--font-display); --ls-label-1: 0.10em;
  --t-label-2:   600 10px/1.2 var(--font-display); --ls-label-2: 0.12em;
  --t-label-3:   500  9px/1.2 var(--font-display); --ls-label-3: 0.14em;

  --t-body-1:    400 13px/1.5 var(--font-body);
  --t-body-2:    400 12px/1.45 var(--font-body);
  --t-body-3:    400 11px/1.4 var(--font-body);

  --t-mono-1:    500 12px/1.3 var(--font-mono);
  --t-mono-2:    500 11px/1.3 var(--font-mono);
  --t-mono-3:    500 10px/1.25 var(--font-mono);
  --t-mono-4:    500  9px/1.2 var(--font-mono);

  --t-kpi-xl:    600 44px/1 var(--font-display);
  --t-kpi-lg:    600 28px/1 var(--font-display);
  --t-kpi-md:    600 18px/1.1 var(--font-mono);

  /* ── Spacing ───────────────────────────────────────────────── */
  --sp-1: 4px;
  --sp-2: 6px;
  --sp-3: 8px;
  --sp-4: 12px;
  --sp-5: 16px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 48px;

  /* ── Radii ─────────────────────────────────────────────────── */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 6px;
  --r-4: 8px;
  --r-pill: 999px;

  /* ── Shadows ───────────────────────────────────────────────── */
  --shadow-sm:    0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:    0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:    0 12px 32px rgba(0,0,0,0.65);
  --shadow-glow:  0 0 0 1px var(--line-glow), 0 0 12px rgba(62,175,111,0.18);

  /* ── Motion ────────────────────────────────────────────────── */
  --t-fast:   120ms ease-out;
  --t-base:   180ms ease-out;
  --t-slow:   280ms ease-out;
}

/* ─────────────────────────────────────────────────────────────────
 * Legacy alias bridge — keeps existing CSS working while we migrate.
 * Delete each block once its surface has been moved off legacy names.
 * ────────────────────────────────────────────────────────────── */

/* Shell aliases */
:root {
  --cice-bg:     var(--bg-1);
  --cice-nav:    var(--bg-2);
  --cice-text:   var(--fg-1);
  --cice-muted:  var(--fg-3);
  --cice-border: var(--line-2);
  --cice-green:  var(--accent);
}

/* Map iframe aliases */
:root {
  --bg:            var(--bg-1);
  --bg-raised:     var(--bg-2);
  --card:          var(--bg-3);
  --text:          var(--fg-1);
  --text-soft:     var(--fg-2);
  --muted:         var(--fg-3);
  --dim:           var(--fg-4);
  --faint:         var(--fg-4);
  --border:        var(--line-2);
  --border-subtle: var(--line-1);
  --border-panel:  var(--line-3);
  --green:         var(--clean);
  --red:           var(--fossil);
  --orange:        var(--mixed);
  --steel:         var(--info);
  --panel-bg:      var(--bg-elev);
  --panel-shadow:  var(--shadow-md);
  --radius-sm:     var(--r-2);
  --radius-md:     var(--r-4);
  --radius-pill:   var(--r-pill);
  --btn-pad:       6px 12px;
  --btn-pad-sm:    3px 8px;
  --ls-label:      var(--ls-label-1);
  --transition:    var(--t-base);
}

/* ─────────────────────────────────────────────────────────────────
 * Locked tabular numerals — apply globally so every number aligns.
 * ────────────────────────────────────────────────────────────── */
.mono, .num, [data-num], .stat .num,
.kpi-value, .kpi-delta,
.ticker-val, .vintage-chip,
.coord-readout, .legend-count,
.tb-count, .tab-count, .cb-count, .cr-val {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}