/* Vantage Data House: election-night dashboard tokens
 * Sources (read 2026-11-02):
 *   [skill]  vantage-chart-creator references/design.md (Vantage 4.0 chart palette, wins on party colors)
 *   [vstyle] political-survey-analyst scripts/vchart/vstyle.js (chart engine constants)
 *   [typ]    political-survey-analyst templates/psa-theme.typ (report theme tokens)
 *   [fig]    Figma 4.0 Design System reference, file 8JiPIjO5UyFcfYpttloo3M node 1:5215 (variable names quoted)
 *   [fig4]   Figma 4.0, file jq1ouMxUaidqjIE1k2GtXA, Header/Main 961:7551 and Tool Tip 917:83091
 * Party colors: the skill's #0D5EEA / #F74B01 are used. The Figma "Data/Vote Share" 300s
 * (#155DFC / #FB522C) are near-identical older aliases; do not mix the two sets.
 */

@font-face { font-family: "Inter"; font-weight: 300; src: url("fonts/Inter-Light.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Inter"; font-weight: 400; src: url("fonts/Inter-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Inter"; font-weight: 400; font-style: italic; src: url("fonts/Inter-Italic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Inter"; font-weight: 500; src: url("fonts/Inter-Medium.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Inter"; font-weight: 600; src: url("fonts/Inter-SemiBold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Inter"; font-weight: 700; src: url("fonts/Inter-Bold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Manrope"; font-weight: 400; src: url("fonts/Manrope-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Manrope"; font-weight: 500; src: url("fonts/Manrope-Medium.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Manrope"; font-weight: 600; src: url("fonts/Manrope-SemiBold.ttf") format("truetype"); font-display: swap; }
/* fonts/ = copy of ~/.claude/skills/political-survey-analyst/templates/fonts (see DESIGN.md), or use Google Fonts instead. */

:root {
  color-scheme: light;

  /* ---- Fonts ---- */
  --font-sans: "Inter", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;   /* [typ] sans; Inter stands in for [fig4] Foundation/Font/Family/SF Pro Text */
  --font-display: "Manrope", "Inter", "Helvetica Neue", Helvetica, sans-serif;          /* [typ] display: big numbers, KPI values */
  --font-num: var(--font-sans);                                                          /* use with font-variant-numeric: tabular-nums */

  /* ---- Type scale (px at 16px root; scale the root for TV, see DESIGN.md) ---- */
  --fs-kpi: 2.5rem;      /* 40px Manrope 600, [typ] key-number 28pt scaled for screen */
  --fs-h1: 1.75rem;      /* 28px light + semibold word, [typ] page title 21pt; [fig4] HeaderRegionID Large */
  --fs-h2: 1.25rem;      /* 20px 600, [fig4] HeaderRegionID Medium */
  --fs-h3: 1rem;         /* 16px 600, card title; [fig] sds-typography-scale-03 = 16 */
  --fs-body: 0.875rem;   /* 14px / 16px, [fig4] Font/Heading/H7 */
  --fs-sm: 0.75rem;      /* 12px / 14px, [fig4] Font/Heading/H8 (nav, tooltip, table cells) */
  --fs-caption: 0.6875rem; /* 11px; [fig4] Font/Caption/Caption-Sm is 10/14, bumped 1px for TV distance */
  --lh-tight: 1.15;
  --lh-body: 1.45;
  --tracking-caption: 0.06em; /* [typ] uppercase captions ("HOW TO READ", section kickers) */

  /* ---- Neutrals ---- */
  --bg: #F1F5F9;            /* [fig] Surface/Neutral/Tertiary (DS reference canvas) */
  --surface: #FFFFFF;       /* [fig] Surface/B&W/White: cards, header */
  --surface-2: #F4F4F5;     /* [fig] Allias/Color/Neutral/100; [typ] tint: table zebra, hover */
  --surface-sunken: #09090B0D; /* [fig] Neutral/Opacity/Black/50; [fig4] surface/neutral/opacity-primary/o-200: pills, switch track */
  --surface-inverse: #09090B;  /* [fig4] surface/neutral/solid/s-black: tooltip */
  --border: #09090B1A;      /* [fig] Border/Opacity/O-Primary/300; [typ] rule, card stroke */
  --border-subtle: #09090B0D; /* [fig4] stroke/neutrals/opacity-primary/o-100: header bottom rule */
  --border-strong: #D4D4D8; /* [fig] Border/Neutral Secondary/200 */
  --zero-line: #09090B33;   /* [typ] zero-line, [fig] Neutral/Opacity/Black/200 */
  --pstrip-tint: 14%;  /* chance-strip party tint; stronger on dark so it reads */
  --pstrip-edge: transparent;
  --mix-1: #6B55FB;  /* donor mix (not party): small donors */
  --mix-2: #A99DFF;  /* large donors */
  --mix-3: #0E9F8E;  /* PACs */
  --mix-4: #71717B;  /* party committees */
  --mix-5: #D4A72C;  /* the candidate's own money */

  --text-1: #09090B;        /* [fig4] text/neutral/solid/s-black: headings, values */
  --text-2: #3F3F47;        /* [typ] body-ink (Zinc/700) */
  --text-3: #71717B;        /* [fig] Allias/Color/Neutral/500; [typ] meta: notes, source lines */
  --text-4: #9F9FA9;        /* [fig4] text/neutral/solid/s-300: disabled, org label */
  --text-on-dark: #F4F4F5;  /* [fig4] text/neutral/solid/s-100: tooltip text */
  --text-action: #649DFF;   /* [fig4] text/action; [vstyle] blueTag: links, active filters */

  /* ---- Accent (brand, not party) ---- */
  --accent: #6B55FB;        /* [typ] purple (Purple/600); [fig] Net Fav/Unfav/300 */
  --accent-strong: #391CAE; /* [typ] purple-deep; [fig] Net Fav/Unfav/500 */
  --accent-soft: #D6D4FF;   /* [fig] Net Fav/Unfav/100 */
  --focus-ring: #6B55FB;

  /* ---- Party ---- */
  --party-d: #0D5EEA;       /* [skill] Democrat */
  --party-d-dark: #0B45A8;  /* [skill] Democrat dark */
  --party-d-soft: #9DC1FF;  /* [skill] Democrat light band */
  --party-d-ink: #0B45A8;   /* text-safe D on light surfaces */
  --party-r: #F74B01;       /* [skill] Republican */
  --party-r-soft: #FFA37C;  /* [skill] Republican light band */
  --party-r-ink: #C11D00;   /* text-safe R; [fig] Data/Vote Share/Rep/400 */
  --party-other: #A1A1AA;   /* [skill] gray for other / public polling / other forecasters */
  --party-other-ink: #71717B;
  --tossup: #C2B8FF;        /* [skill] toss-up, |margin| < 3 */
  --split: #FFD0BC;         /* [skill] split outcome (D House, R Senate) */
  --not-up-d: #C9D2E3;      /* [skill] seats not up, Democratic */
  --not-up-r: #EBD3C8;      /* [skill] seats not up, Republican */
  --scenario-low: #90A1B9;  /* [skill] ordered scenarios, slate */
  --scenario-high: #314158;
  --reference: #A1A1AA;     /* [skill] projection ticks, Polymarket line when not party-coded */
  --no-data: #D4D4D8;       /* [typ] gray-bar; counties with 0% reporting */

  /* ---- Margin map: continuous gradient stops [skill] (interpolate, never bin) ---- */
  --margin-stop-r45: #F74B01; --margin-stop-r25: #FF7940; --margin-stop-r12: #FFA37C; --margin-stop-r4: #FEE9E1;
  --margin-stop-0: #E9DCFF;
  --margin-stop-d4: #D8E6FF;  --margin-stop-d12: #9DC1FF; --margin-stop-d25: #0D5EEA; --margin-stop-d45: #0B45A8;
  /* 7-step legend swatches drawn from those stops (R strong -> D strong) */
  --margin-r3: #F74B01;  /* R+25 and more */
  --margin-r2: #FFA37C;  /* R+12 */
  --margin-r1: #FEE9E1;  /* R+4 */
  --margin-0:  #E9DCFF;  /* even */
  --margin-d1: #D8E6FF;  /* D+4 */
  --margin-d2: #9DC1FF;  /* D+12 */
  --margin-d3: #0D5EEA;  /* D+25 and more */

  /* ---- Model error map: actual minus projected margin, D-positive ----
   * The house palette has no error ramp, so this borrows [fig] Data/Win Prob (teal / crimson),
   * a different hue pair from the party blue/orange so the two maps never read as the same thing. */
  /* vs. model (2026-11-03, Bishop's call): green = on the model (within 4 pts), orange = the result ran more Republican
   * than we projected, blue = more Democratic. Party hues here mean "toward that party", read with the legend.
   * Maps draw it in steps (±4 / 8 / 12 pts) so the distance is easy to read; dots and lines interpolate. */
  --err-r3: #C2410C;  /* race map: 12+ pts more R than the model */
  --err-r2: #F97316;  /* 8-12 pts */
  --err-r1: #FDBA74;  /* 4-8 pts */
  --err-0:  #22C55E;  /* on the model: within 4 pts */
  --err-d1: #93C5FD;  /* 4-8 pts more D */
  --err-d2: #3B82F6;  /* 8-12 pts */
  --err-d3: #1D4ED8;  /* 12+ pts */
  /* % counted, stepped (map "% in"): lighter = less counted, darker = more, in both themes */
  --pin-1: #EDE9FE; --pin-2: #C4B5FD; --pin-3: #8B5CF6; --pin-4: #6D28D9; --pin-5: #3B0764;

  /* ---- Semantic ---- */
  --good: #00BC7D;      /* [fig] Semantic/Success/300 */
  --good-soft: #A4F4CF; /* [fig] Semantic/Success/100 */
  --warn: #FE9A00;      /* [fig] Semantic/Warning/300 */
  --warn-soft: #FFF085; /* [fig] Semantic/Warning/100 */
  --bad: #C026D3;       /* errors (fuchsia): red is reserved for the Republican party */
  --bad-soft: #FAE8FF;
  --miss: #3F3F47;      /* model miss marks (✗, miss dots): neutral ink, never a party color */
  --info: #2B7FFF;      /* [fig] Semantic/Information/300 */
  --info-soft: #BEDBFF; /* [fig] Semantic/Information/100 */
  --live: #00BC7D;      /* live dot (= --good); pair with the word "Live" */

  /* ---- Charts [vstyle] ---- */
  --chart-grid: #0000000D;
  --chart-tick: #00000066;
  --chart-label: #00000099;
  --chart-ink: #000000CC;
  --chart-stroke: #0000001A;
  --map-stroke: #FFFFFF;    /* county borders, 0.5px */

  /* ---- Radii ---- */
  --radius-xs: 4px;     /* bars ([vstyle] borderRadius 3), swatches */
  --radius-sm: 8px;     /* [fig4] tooltip item rounded-8 */
  --radius-md: 12px;    /* inputs, small tiles */
  --radius-lg: 16px;    /* cards: [typ] card radius 10pt ~ 17px in Figma */
  --radius-pill: 200px; /* [fig4] radius/full: nav buttons, badges, switch */

  /* ---- Spacing (4px grid; [typ] 8pt grid with half steps) ---- */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --gap-nav: 26px;          /* [fig4] Menu/Main gap */
  --header-pad: 20px;       /* [fig4] Header/Main padding */

  /* ---- Elevation ---- */
  --shadow-xs: 0 2px 4px -4px #0000001A;  /* [fig4] Drop Shadow/XSmall */
  --shadow-tooltip: 0 2px 2px #0000001A;  /* [fig4] tooltip item */
  --shadow-avatar: -2px 1px 2px #0000000D, -5px 2px 8px #00000005; /* [fig4] Prodile Image Drop 1 */
}

/* ---- Dark: [fig] Opacity/White tokens, Neutral/Fixed/Black, Border/Neutral Primary/200 ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #09090B;            /* [fig] Allias/Color/Neutral/Fixed/Black */
    --surface: #18181B;       /* [fig] Allias/Color/Neutral/900 */
    --surface-2: #27272A;     /* [vstyle]/logo ink Zinc/800 */
    --surface-sunken: #FFFFFF1A; /* [fig] Opacity/White/100 */
    --surface-inverse: #F4F4F5;
    --border: #FFFFFF1A;      /* [fig] Surface/Opacity/O-Secondary/300 */
    --border-subtle: #FFFFFF0F;
    --border-strong: #3F3F47; /* [fig] Border/Neutral Primary/200 */
    --zero-line: #FFFFFF4D;   /* [fig] Opacity/White/300 */
    --pstrip-tint: 34%;  /* chance-strip party tint; stronger on dark so it reads */
    --pstrip-edge: #FFFFFF14;
    --mix-1: #8886FF; --mix-2: #C4BCFF; --mix-3: #2CC8B4; --mix-4: #9F9FA9; --mix-5: #E5BE4D;
    --text-1: #F4F4F5;
    --text-2: #FFFFFFB2;      /* [fig] Opacity/White/700 */
    --text-3: #9F9FA9;
    --text-4: #71717B;
    --text-on-dark: #09090B;
    --accent: #8886FF;        /* [fig] Net Fav/Unfav/200 */
    --accent-soft: #391CAE;
    --focus-ring: #8886FF;
    --party-d-ink: #8EC5FF;   /* [fig] Vote Share/Dem/200 */
    --party-r-ink: #FF7940;   /* [skill] stop R+25 */
    --party-other-ink: #A1A1AA;
    --err-0: #16A34A;
    --pin-1: #EDE9FE; --pin-2: #C4B5FD; --pin-3: #8B5CF6; --pin-4: #6D28D9; --pin-5: #4C1D95;
    --miss: #E4E4E7;
    --margin-0: #E9DCFF;      /* map ramps unchanged; see DESIGN.md */
    --no-data: #52525C;       /* [fig] Surface/300 2 */
    --chart-grid: #FFFFFF14;
    --chart-tick: #FFFFFF66;
    --chart-label: #FFFFFF99;
    --chart-ink: #FFFFFFCC;
    --chart-stroke: #FFFFFF1A;
    --map-stroke: #18181B;
    --shadow-xs: none;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #09090B; --surface: #18181B; --surface-2: #27272A; --surface-sunken: #FFFFFF1A; --surface-inverse: #F4F4F5;
  --border: #FFFFFF1A; --border-subtle: #FFFFFF0F; --border-strong: #3F3F47; --zero-line: #FFFFFF4D; --pstrip-tint: 34%; --pstrip-edge: #FFFFFF14; --mix-1: #8886FF; --mix-2: #C4BCFF; --mix-3: #2CC8B4; --mix-4: #9F9FA9; --mix-5: #E5BE4D;
  --text-1: #F4F4F5; --text-2: #FFFFFFB2; --text-3: #9F9FA9; --text-4: #71717B; --text-on-dark: #09090B;
  --accent: #8886FF; --accent-soft: #391CAE; --focus-ring: #8886FF;
  --party-d-ink: #8EC5FF; --party-r-ink: #FF7940; --party-other-ink: #A1A1AA;
  --err-0: #16A34A; --pin-1: #EDE9FE; --pin-2: #C4B5FD; --pin-3: #8B5CF6; --pin-4: #6D28D9; --pin-5: #4C1D95; --miss: #E4E4E7; --no-data: #52525C;
  --chart-grid: #FFFFFF14; --chart-tick: #FFFFFF66; --chart-label: #FFFFFF99; --chart-ink: #FFFFFFCC; --chart-stroke: #FFFFFF1A;
  --map-stroke: #18181B; --shadow-xs: none;
}

/* TV / wall screen: scale everything from the root */
:root[data-screen="tv"] { font-size: 20px; }

/* ---- Chart series: every non-party line, dot and band (added 2026-11-02 for js/charts.js) ----
 * House rule: blue (--party-d) and orange (--party-r) mean parties and nothing else. Model, market and
 * baseline series use these instead: the brand purple, two neutrals and one teal, kept apart from the
 * party hues, the --tossup lavender and the --err-* map ramps. Each passes 3:1 against its card surface
 * (white / #18181B). Purple and D-blue sit close for blue-yellow color vision, so when they share a chart,
 * label lines directly and keep the party line solid and the model line distinct (width or dash). */
:root {
  --series-1: #6B55FB;      /* our live model: = --accent (4.9:1 on white) */
  --series-2: #3F3F47;      /* pre-election projection / baseline, usually dashed: Zinc/700 ink (10.4:1) */
  --series-3: #028266;      /* market odds (Polymarket): teal, [fig] Data/Net Fav/Fav 5 (4.8:1) */
  --series-4: #8E8E98;      /* context: other forecasters, public polling; a step darker than --reference so thin lines pass 3:1 */
  --series-band: #6B55FB1F; /* model intervals and expected-error bands: --series-1 at 12% */
  /* forecaster comparison lines (Scorecard): other forecasters and our sub-models, each labeled directly;
     clear of the party hues, --series-1 purple and --series-3 teal */
  --cmp-1: #15803D;         /* green */
  --cmp-2: #A16207;         /* gold */
  --cmp-3: #BE185D;         /* rose */
  --cmp-4: #475569;         /* slate */
  --cmp-5: #92400E;         /* tan / brown */
  --tt-d-ink: #8EC5FF;      /* party inks on the tooltip, which is dark in light theme */
  --tt-r-ink: #FF7940;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --series-1: #8886FF;      /* = dark --accent (5.8:1 on #18181B) */
    --series-2: #D4D4D8;      /* Zinc/300 (12.0:1) */
    --series-3: #2DD4BF;      /* lighter teal; not the Fav-3 green, which reads as --good (9.5:1) */
    --series-4: #8A8A94;      /* (5.2:1), recedes behind --series-2 */
    --series-band: #8886FF24; /* --series-1 at 14% */
    --cmp-1: #4ADE80; --cmp-2: #FACC15; --cmp-3: #F472B6; --cmp-4: #94A3B8; --cmp-5: #D6A36A;
    --tt-d-ink: #0B45A8; --tt-r-ink: #C11D00; /* tooltip is light in dark theme */
  }
}
:root[data-theme="dark"] {
  --series-1: #8886FF; --series-2: #D4D4D8; --series-3: #2DD4BF; --series-4: #8A8A94; --series-band: #8886FF24;
  --cmp-1: #4ADE80; --cmp-2: #FACC15; --cmp-3: #F472B6; --cmp-4: #94A3B8; --cmp-5: #D6A36A;
  --tt-d-ink: #0B45A8; --tt-r-ink: #C11D00;
}