/* ============================================================================
   Nova — Design System  ·  v3.0 "Black key"
   Canonical monochrome (Palantir-key) design system for NovaGovAI.
   Deep-black surfaces · warm bone type · zero chroma on brand ·
   status colour lives inside data only.

   Two jobs:
     1. Defines the canonical design tokens + component classes for NEW work
        (sun-mark, briefing card, kpi tiles, sharp buttons, mono eyebrows).
     2. Re-skins EXISTING pages by aliasing their legacy CSS variables
        (--bg, --accent, --teal, --text-1 …) onto the monochrome palette.
        Because CSS custom properties resolve lazily, a page that already
        uses var(--bg) etc. flips to monochrome the moment this file loads,
        regardless of <link> order.

   Source of truth: src/css/nova-ds.css  ·  Updated 2026-06-11
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap');

:root {
  /* ── Foundation: surfaces (warm near-black) ─────────────────────────── */
  --paper-100:   #0A0A0A;   /* primary surface */
  --paper-200:   #141414;   /* elevated panel / card */
  --paper-300:   #1F1F1F;   /* deeper inset */
  --paper-white: #141414;

  /* ── Type / rules: bone scale ───────────────────────────────────────── */
  --ink-1000: #ECE8DD;   /* bone — primary text */
  --ink-900:  #D6D2C6;
  --ink-700:  #A8A49A;
  --ink-500:  #6E6A62;   /* dim metadata */
  --ink-300:  #4A4842;
  --ink-200:  #2A2925;   /* hairline rules */
  --ink-100:  #1A1A18;
  --ink-50:   #131311;

  /* ── Accent (no chroma): bone-white highlight ───────────────────────── */
  --solar-700: #8F8B82;
  --solar-500: #F4F0E4;
  --solar-300: #C5C1B6;
  --solar-100: #2A2925;

  /* ── Status: desaturated, dark-tuned — DATA ONLY, never on a button ──── */
  --brick-700: #6B2A22;  --brick-500: #A04638;  --brick-100: #3A1F1B;
  --sea-700:   #1F3A52;  --sea-500:   #4A6B86;  --sea-100:   #1B2530;
  --moss-500:  #7A8E5A;  --moss-100:  #232A1C;
  --amber-500: #C29A3A;  --amber-100: #2A2418;

  /* ── Type families ──────────────────────────────────────────────────── */
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ── Spacing (4px base) ─────────────────────────────────────────────── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  /* ── Radii (prefer sharp) ───────────────────────────────────────────── */
  --r-0: 0; --r-1: 2px; --r-2: 4px; --r-3: 8px; --r-4: 12px; --r-pill: 999px;

  /* ════════════════════════════════════════════════════════════════════
     LEGACY ALIASES — map old page tokens onto the monochrome palette.
     Re-skins var()-driven pages with no per-page palette edit.
     Brand colour (teal/cyan/blue/purple) → bone/ink. NO chroma on brand.
     Semantic colour (green/yellow/red/blue-info) → desaturated status.
     ════════════════════════════════════════════════════════════════════ */

  /* surfaces (home: --bg / --bg-card …  demo: --bg-0…3) */
  --bg:          #0A0A0A;
  --bg-0:        #0A0A0A;
  --bg-1:        #0F0F0F;
  --bg-2:        #141414;
  --bg-3:        #1F1F1F;
  --bg-card:     #141414;
  --bg-card2:    #0F0F0F;
  --bg-section:  #0C0C0C;

  /* text */
  --text:    #ECE8DD;
  --text-1:  #ECE8DD;
  --text-2:  #A8A49A;
  --text-3:  #6E6A62;
  --muted:   #A8A49A;

  /* brand accents → bone/ink (no chroma) */
  --accent:      #ECE8DD;
  --accent2:     #D6D2C6;
  --accent3:     #A8A49A;
  --teal:        #ECE8DD;
  --teal-light:  #F4F0E4;
  --teal-dim:    rgba(236,232,221,0.10);

  /* borders / glow / overlays */
  --border:        #2A2925;
  --border-2:      #4A4842;
  --border-b:      #4A4842;
  --glow:          rgba(236,232,221,0.05);
  --hover-overlay: rgba(236,232,221,0.05);
  --nav-scrolled-bg: rgba(10,10,10,0.92);

  /* semantic / status — meaning preserved, desaturated */
  --green:      #7A8E5A;  --green-dim:  rgba(122,142,90,0.14);
  --yellow:     #C29A3A;  --yellow-dim: rgba(194,154,58,0.14);
  --red:        #A04638;  --red-dim:    rgba(160,70,56,0.16);
  --blue:       #4A6B86;  --blue-dim:   rgba(74,107,134,0.14);
  --purple:     #5A6276;

  /* fonts (legacy var names used by demo) */
  --font: "Geist", ui-sans-serif, system-ui, sans-serif;
}

/* The design system is "Black key" — DARK ONLY. No light mode exists.
   Force every theme state (incl. a stale [data-theme="light"] left by an old
   toggle or the OS prefers-color-scheme) onto the dark palette so the site
   ALWAYS matches the system. This block loads after page styles, so it wins
   on document order; the !important guards win over inline theme rules. */
:root,
[data-theme="light"], [data-theme="dark"],
.light, body.light, html.light, .theme-light {
  color-scheme: dark !important;
  --bg:          #0A0A0A !important;
  --bg-0:        #0A0A0A !important;
  --bg-1:        #0F0F0F !important;
  --bg-2:        #141414 !important;
  --bg-3:        #1F1F1F !important;
  --bg-card:     #141414 !important;
  --bg-card2:    #0F0F0F !important;
  --bg-section:  #0C0C0C !important;
  --text:    #ECE8DD !important;  --text-1:  #ECE8DD !important;
  --text-2:  #A8A49A !important;  --text-3:  #6E6A62 !important;
  --muted:   #A8A49A !important;
  --accent:  #ECE8DD !important;  --accent2: #D6D2C6 !important;  --accent3: #A8A49A !important;
  --teal:    #ECE8DD !important;  --teal-light: #F4F0E4 !important; --teal-dim: rgba(236,232,221,0.10) !important;
  --border:  #2A2925 !important;  --border-2: #4A4842 !important;
  --ink-1000: #ECE8DD !important; --ink-900: #D6D2C6 !important; --ink-700: #A8A49A !important; --ink-500: #6E6A62 !important;
  --paper-100: #0A0A0A !important; --paper-200: #141414 !important; --paper-300: #1F1F1F !important;
}

/* Catch hardcoded light backgrounds that survive in [data-theme="light"]
   element rules (e.g. a nav set to #fff): force dark surface + bone text. */
[data-theme="light"] body, [data-theme="light"] {
  background: #0A0A0A !important; color: #ECE8DD !important;
}

/* The light/dark toggle is now a no-op (dark-only). Hide it so it isn't a
   dead control — this also removes its sun/moon glyph from the UI. */
#themeToggle, .theme-toggle, [data-theme-toggle], .theme-switch, .theme-btn,
button[aria-label*="light" i], button[aria-label*="dark mode" i] { display: none !important; }

/* No chroma anywhere — including browser-default blue focus rings, form
   accent colours, and selection. Focus is shown as a bone ring instead. */
:root { accent-color: #ECE8DD; }
*:focus-visible {
  outline: 2px solid var(--ink-700, #A8A49A) !important;
  outline-offset: 2px !important;
  border-radius: 2px;
}
*:focus:not(:focus-visible) { outline: none !important; }
input, select, textarea, button { accent-color: #ECE8DD; }

/* ============================================================================
   BASE
   ============================================================================ */
.nova-ds, .nova-ds * { box-sizing: border-box; }
.nova-ds {
  background: var(--paper-100);
  color: var(--ink-1000);
  font-family: var(--sans);
  font-feature-settings: "ss01", "cv11", "tnum";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================================
   BRAND MARK — angular chevron glyph (replaces emoji/logo bitmaps)
   ============================================================================ */
.sun-mark { width: 22px; height: 22px; flex-shrink: 0; position: relative; display: inline-block; }
.sun-mark::before {
  content: ""; position: absolute; inset: 0; background: var(--ink-1000);
  clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%,50% 0,50% 18%,18% 50%,50% 82%,82% 50%,50% 18%);
}

/* ============================================================================
   TYPOGRAPHY HELPERS
   ============================================================================ */
.ds-eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-500);
  display: inline-flex; align-items: center; gap: var(--s-3);
}
.ds-eyebrow .num {
  color: var(--paper-100); background: var(--ink-1000);
  padding: 2px 6px; border-radius: var(--r-1); font-weight: 600;
}
.ds-mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ============================================================================
   BUTTONS — primary stays bone-on-black; no chromatic fill exists
   ============================================================================ */
.ds-btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  height: 44px; padding: 0 var(--s-5);
  font-family: var(--sans); font-size: 14px; font-weight: 500; line-height: 1;
  border-radius: var(--r-1); border: 1px solid var(--ink-1000);
  cursor: pointer; text-decoration: none;
  transition: transform 80ms ease, background 120ms ease, border-color 120ms ease;
}
.ds-btn:hover { transform: translateY(-1px); }
.ds-btn-primary { background: var(--ink-1000); color: var(--paper-100); }
.ds-btn-primary .arr {
  background: var(--paper-100); color: var(--ink-1000);
  width: 20px; height: 20px; display: inline-flex; align-items: center;
  justify-content: center; border-radius: 2px; margin-right: -6px; margin-left: 6px;
}
.ds-btn-secondary { background: transparent; color: var(--ink-1000); border-color: var(--ink-200); }
.ds-btn-secondary:hover { border-color: var(--ink-1000); }
.ds-btn-accent { background: transparent; color: var(--ink-1000); border-color: var(--ink-1000); }
.ds-btn-ghost {
  background: transparent; color: var(--ink-1000); border-color: transparent;
  border-bottom: 1px solid var(--ink-1000); border-radius: 0; padding: 0 0 6px 0; height: auto;
}

/* ============================================================================
   TAGS / STATUS PILLS
   ============================================================================ */
.ds-tag {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
  border-radius: var(--r-1); background: transparent; color: var(--ink-900); border: 1px solid var(--ink-200);
}
.ds-tag-mono { background: var(--ink-1000); color: var(--paper-100); border-color: var(--ink-1000); }
.ds-tag-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--moss-500); }
.ds-tag-warn  { background: var(--amber-100); border-color: #5a4a24; color: #E0C98F; }
.ds-tag-warn::before  { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--amber-500); }
.ds-tag-alert { background: var(--brick-100); border-color: #6b3027; color: #E0B5AD; }
.ds-tag-alert::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brick-500); }

/* ============================================================================
   FORM FIELDS
   ============================================================================ */
.ds-field { display: flex; flex-direction: column; gap: 6px; }
.ds-field label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-500);
}
.ds-field input, .ds-field select {
  height: 44px; padding: 0 var(--s-4); border: 1px solid var(--ink-200);
  background: var(--paper-200); font-family: var(--sans); font-size: 15px;
  color: var(--ink-1000); border-radius: var(--r-1);
}
.ds-field input:focus, .ds-field select:focus {
  outline: 1px solid var(--ink-1000); outline-offset: -1px; border-color: var(--ink-1000);
}

/* ============================================================================
   CARDS
   ============================================================================ */
.ds-card {
  border: 1px solid var(--ink-200); background: var(--paper-200);
  padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-4);
}
.ds-card h4 { margin: 0; font-size: 20px; font-weight: 500; letter-spacing: -0.01em; }
.ds-card p { margin: 0; color: var(--ink-700); font-size: 14px; line-height: 1.5; }
.ds-card-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.ds-card-list li { padding-left: 16px; position: relative; }
.ds-card-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 1px; background: var(--ink-700); }

/* ============================================================================
   KPI TILES
   ============================================================================ */
.ds-kpi {
  border: 1px solid var(--ink-200); background: var(--paper-200);
  padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2);
}
.ds-kpi .key { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; color: var(--ink-500); text-transform: uppercase; }
.ds-kpi .val { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 40px; letter-spacing: -0.02em; line-height: 1; }
.ds-kpi .delta { font-family: var(--mono); font-size: 11px; color: #94A574; }
.ds-kpi .delta.down { color: #C7847A; }
.ds-kpi.kpi-dark { background: var(--ink-1000); color: var(--paper-100); border-color: var(--ink-1000); }
.ds-kpi.kpi-dark .key { color: var(--ink-300); }

/* ============================================================================
   SCORE CARD + PROGRESS BARS
   ============================================================================ */
.ds-score-card {
  border: 1px solid var(--ink-200); background: var(--paper-200); padding: var(--s-5);
  display: grid; grid-template-columns: 1fr auto; gap: var(--s-4); align-items: end;
}
.ds-score-card .num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 72px; line-height: 0.9; letter-spacing: -0.03em; }
.ds-score-card .num span { font-size: 28px; color: var(--ink-500); }
.ds-bar-track { height: 4px; background: var(--ink-200); overflow: hidden; }
.ds-bar-fill { height: 100%; background: var(--ink-1000); }
.ds-bar-fill.warn { background: var(--amber-500); }
.ds-bar-fill.alert { background: var(--brick-500); }

/* ============================================================================
   LIVE BRIEFING CARD — the signature mayor's-briefing panel
   ============================================================================ */
.ds-briefing {
  border: 1px solid var(--ink-200); background: var(--paper-200);
  display: flex; flex-direction: column;
  box-shadow: 0 0 0 1px var(--ink-200), 8px 8px 0 -1px #000;
}
.ds-briefing-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-3) var(--s-4); background: var(--ink-1000); color: var(--paper-100);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
}
.ds-briefing-head .live { display: inline-flex; align-items: center; gap: 6px; }
.ds-briefing-head .live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--paper-100); animation: ds-pulse 1.5s ease-in-out infinite; }
@keyframes ds-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
.ds-briefing-body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-4); }
.ds-briefing-row { display: grid; grid-template-columns: 1fr auto; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--ink-200); }
.ds-briefing-row:last-child { border-bottom: 0; }
.ds-briefing-row .num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 28px; line-height: 1; }
.ds-briefing-row .num .of { color: var(--ink-300); font-size: 16px; }

/* ============================================================================
   PILL (founding-cohort style)
   ============================================================================ */
.ds-pill {
  display: inline-flex; align-items: center; gap: var(--s-2); height: 28px; padding: 0 var(--s-3);
  border: 1px solid var(--ink-300); border-radius: var(--r-pill);
  font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  background: transparent; width: max-content;
}
.ds-pill .dot { width: 6px; height: 6px; background: var(--ink-1000); border-radius: 50%; }

/* ============================================================================
   RULES / SELECTION
   ============================================================================ */
.ds-rule { border: 0; border-top: 1px solid var(--ink-200); margin: var(--s-7) 0; }
.nova-ds ::selection { background: var(--ink-1000); color: var(--paper-100); }