/* ==========================================================================
   UP403 DESIGN TOKENS (tokens.css)
   Phase 6: Standardized Design System conforming to Owner Decision D7
   Light is Default. Dark is available from header toggle (#theme).
   ========================================================================== */

:root,
:root[data-theme="light"] {
  color-scheme: light;

  /* --- Color Palette: Light (Default) --- */
  --bg: #EDF3FB;
  --paper: #EDF3FB;
  --surf: #FFFFFF;
  --surf2: #F4F7FC;
  --surface: #FFFFFF;
  --card-bg: #FFFFFF;
  --card-surf: #FFFFFF;
  --soft: #F4F7FC;
  --sunk: #E2E8F0;

  /* Ink / Typography */
  --ink: #0F172A;
  --ink2: #334155;
  --mut: #475569;
  --muted: #475569;
  --card-ink: #0F172A;

  /* Lines & Borders */
  --line: #CBD5E1;
  --line2: #E2E8F0;
  --border: #CBD5E1;

  /* Accents & Brand */
  --acc: #1D4ED8;
  --accent: #1D4ED8;
  --acc2: #0F766E;
  --accent2: #0F766E;
  --accSoft: #EFF6FF;
  --pale: #EFF6FF;
  --glow: rgba(29, 78, 216, 0.18);

  /* Button Tokens (Light) */
  --btn-bg: #FFFFFF;
  --btn-ink: #0F172A;
  --btn-border: #CBD5E1;
  --btn-primary-bg: #1D4ED8;
  --btn-primary-ink: #FFFFFF;

  /* Header & Nav (Light) */
  --header-bg: #FFFFFF;
  --header-ink: #0F172A;
  --header-border: #CBD5E1;
  --nav-bg: #FFFFFF;
  --nav-ink: #334155;
  --nav-active-bg: #EFF6FF;
  --nav-active-ink: #1D4ED8;

  /* Map Panel (Light) */
  --map-panel-bg: #FFFFFF;
  --map-panel-ink: #0F172A;
  --map-panel-border: #CBD5E1;
  --mapbg: radial-gradient(120% 90% at 50% 8%, #FFFFFF 0%, #EDF3FB 62%, #E2ECF7 100%);
  --stroke: rgba(255, 255, 255, 0.9);

  /* Party Colors */
  --bsp: #1D4ED8;
  --BSP: #1D4ED8;
  --SP:  #B91C1C;
  --BJP: #B45309;
  --INC: #0F766E;
  --OTH: #475569;

  /* Tier Colors */
  --tier-hold: #1D4ED8;
  --tier-a:    #0E7A54;
  --tier-b:    #B45309;
  --tier-c:    #6D28D9;
  --tier-d:    #475569;

  --hold: #1D4ED8;
  --A:    #0E7A54;
  --B:    #B45309;
  --C:    #6D28D9;
  --D:    #475569;

  /* Status Tokens */
  --good: #0E7A54;
  --warn: #B45309;
  --crit: #B91C1C;
  --lo:   #B45309;
  --mid:  #64748B;
  --hi:   #0F766E;

  /* --- Type Scale (Accessible, min 12px for body) --- */
  --font-xs: 12px;
  --font-sm: 12.5px;
  --font-base: 13.5px;
  --font-md: 15px;
  --font-lg: 17px;
  --font-xl: 20px;
  --font-2xl: 24px;
  --font-3xl: 28px;

  /* --- Spacing Scale --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;

  /* --- Border Radius Scale --- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-pill: 9999px;

  /* Shadows */
  --sh: 0 1px 3px rgba(16, 36, 71, 0.06), 0 10px 30px rgba(40, 75, 115, 0.08);
  --shHi: 0 4px 12px rgba(16, 36, 71, 0.10), 0 20px 48px rgba(16, 36, 71, 0.12);
}

/* ==========================================================================
   Dark Theme (Activated via Header Toggle: <html data-theme="dark">)
   ========================================================================== */
:root[data-theme="dark"] {
  color-scheme: dark;

  /* --- Color Palette: Dark --- */
  --bg: #0B111E;
  --paper: #0B111E;
  --surf: #131E31;
  --surf2: #19273F;
  --surface: #131E31;
  --card-bg: #131E31;
  --card-surf: #131E31;
  --soft: #19273F;
  --sunk: #080D17;

  /* Ink / Typography */
  --ink: #F1F5F9;
  --ink2: #CBD5E1;
  --mut: #8FA2BD;
  --muted: #8FA2BD;
  --card-ink: #F1F5F9;

  /* Lines & Borders */
  --line: #243550;
  --line2: #1E2C44;
  --border: #243550;

  /* Accents & Brand */
  --acc: #3B82F6;
  --accent: #3B82F6;
  --acc2: #14B8A6;
  --accent2: #14B8A6;
  --accSoft: #19273F;
  --pale: #19273F;
  --glow: rgba(59, 130, 246, 0.30);

  /* Button Tokens (Dark) */
  --btn-bg: #19273F;
  --btn-ink: #F1F5F9;
  --btn-border: #243550;
  --btn-primary-bg: #2563EB;
  --btn-primary-ink: #FFFFFF;

  /* Header & Nav (Dark) */
  --header-bg: #0D1627;
  --header-ink: #F1F5F9;
  --header-border: #243550;
  --nav-bg: #131E31;
  --nav-ink: #CBD5E1;
  --nav-active-bg: #19273F;
  --nav-active-ink: #3B82F6;

  /* Map Panel (Dark) */
  --map-panel-bg: #131E31;
  --map-panel-ink: #F1F5F9;
  --map-panel-border: #243550;
  --mapbg: radial-gradient(120% 92% at 50% 6%, #15223E 0%, #0A1224 55%, #05090F 100%);
  --stroke: rgba(5, 9, 15, 0.9);

  /* Party Colors in Dark */
  --bsp: #6878E4;
  --BSP: #6878E4;
  --SP:  #E11D48;
  --BJP: #D97706;
  --INC: #0D9488;
  --OTH: #94A3B8;

  /* Tier Colors in Dark */
  --tier-hold: #3B82F6;
  --tier-a:    #10B981;
  --tier-b:    #F59E0B;
  --tier-c:    #8B5CF6;
  --tier-d:    #64748B;

  --hold: #3B82F6;
  --A:    #10B981;
  --B:    #F59E0B;
  --C:    #8B5CF6;
  --D:    #64748B;

  /* Status in Dark */
  --good: #10B981;
  --warn: #F59E0B;
  --crit: #EF4444;
  --lo:   #F59E0B;
  --mid:  #94A3B8;
  --hi:   #38BDF8;

  /* Shadows in Dark */
  --sh: 0 2px 6px rgba(0, 0, 0, 0.40);
  --shHi: 0 6px 18px rgba(0, 0, 0, 0.60);
}

/* ==========================================================================
   Component Token Bindings (Header, Nav, Cards, Buttons, Map Panel)
   ========================================================================== */

/* Body */
body {
  background-color: var(--bg) !important;
  color: var(--ink) !important;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Header */
header, body > header, .hbar {
  background-color: var(--header-bg) !important;
  color: var(--header-ink) !important;
  border-color: var(--header-border) !important;
}

/* Nav & Tabs */
.tabs, .nav {
  background-color: var(--nav-bg) !important;
  border-color: var(--line) !important;
}

.tab {
  color: var(--nav-ink) !important;
}

.tab.on, .tab.active {
  background-color: var(--nav-active-bg) !important;
  color: var(--nav-active-ink) !important;
}

/* Cards */
.card, .scCard, .mcard, .dossier-card, .brief-card, .metric-card, .intel-card {
  background-color: var(--card-bg) !important;
  color: var(--card-ink) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--sh);
}

/* Buttons */
button:not(.btn-primary):not(#btnPodShowMap):not(.live-filter-pill.active) {
  background-color: var(--btn-bg);
  color: var(--btn-ink);
  border: 1px solid var(--btn-border);
}

/* Map Panel */
.maphead, .mapcontrols, #mapPanel, .railL, .railR {
  background-color: var(--map-panel-bg) !important;
  color: var(--map-panel-ink) !important;
  border-color: var(--map-panel-border) !important;
}

/* Candidate tab & responsive text minimum enforcement (Phase 6 / Phone-first: min 12px) */
#page-cand [style*="font-size: 11"],
#page-cand [style*="font-size:11"],
#page-cand [style*="font-size: 10"],
#page-cand [style*="font-size:10"],
#page-cand [style*="font-size: 9"],
#page-cand [style*="font-size:9"],
#page-cand [style*="font-size: 8"],
#page-cand [style*="font-size:8"],
#page-cand .es,
#page-cand .mono,
#page-cand .pn1 {
  font-size: 12px !important;
}