/* Civic Line theme (v0.1) for Ballot Record 75218.
   Idea: every level of government has one line-drawn symbol and one color. Everything else stays quiet.
   Tokens only here; page layouts live in their own files. */
:root {
  /* Neutrals: cool, slightly blue grey (about 90% of the screen) */
  --paper: #F3F5F9; --surface: #FFFFFF; --surface-2: #E9EDF3;
  --ink: #14213A; --ink-2: #44516A; --ink-3: #5F6B82; --line: #D8DEE8;
  /* One color per level (stroke, accents, level names). All pass 4.5:1 on --surface. */
  --lv-washington: #2F4F86; --lv-texas: #5B47C2; --lv-county: #1C7563; --lv-city: #96590A; --lv-schools: #A8356A; --lv-home: #14213A;
  /* Party marks: only on the ring around a face, always with a written label nearby */
  --dem: #2A78D6; --rep: #D93F3E; --non: #8A8F99;
  /* Who supported a decision (checked with the dataviz palette validator; shapes differ too) */
  --sup-both: #1B8A6B; --sup-rep: #D93F3E; --sup-dem: #2A78D6; --sup-pres: #5F6B82; --sup-split: #44516A; --sup-unknown: #9AA3B2;
  /* Type */
  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --step--1: 0.875rem; --step-0: 1.0625rem; --step-1: 1.3rem; --step-2: 1.7rem; --step-3: 2.4rem; --step-4: clamp(2.4rem, 5.5vw, 4.2rem);
  /* Space and shape */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 72px;
  --radius-s: 8px; --radius-m: 16px; --radius-l: 28px; --radius-round: 999px;
  --stroke: 3px;
  --shadow-card: 0 1px 2px rgb(20 33 58 / 6%), 0 12px 32px -12px rgb(20 33 58 / 18%);
  /* Motion */
  --ease-out: cubic-bezier(.2, .7, .2, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-quick: 160ms; --dur-move: 420ms; --dur-draw: 1600ms;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --paper: #0E1524; --surface: #162034; --surface-2: #1E2A42;
  --ink: #E9EEF6; --ink-2: #B4BED0; --ink-3: #93A0B6; --line: #2A3753;
  --lv-washington: #93B2EE; --lv-texas: #ADA0F6; --lv-county: #62CDB2; --lv-city: #E7AB4C; --lv-schools: #F08DB9; --lv-home: #E9EEF6;
  --dem: #4B90E6; --rep: #EC6C6B; --non: #9AA0AA;
  --sup-both: #26A07C; --sup-rep: #E5514F; --sup-dem: #3A87E5; --sup-pres: #93A0B6; --sup-split: #B4BED0; --sup-unknown: #5D6A84;
  --shadow-card: 0 1px 2px rgb(0 0 0 / 30%), 0 16px 40px -16px rgb(0 0 0 / 60%);
  color-scheme: dark; } }
:root[data-theme="dark"] {
  --paper: #0E1524; --surface: #162034; --surface-2: #1E2A42;
  --ink: #E9EEF6; --ink-2: #B4BED0; --ink-3: #93A0B6; --line: #2A3753;
  --lv-washington: #93B2EE; --lv-texas: #ADA0F6; --lv-county: #62CDB2; --lv-city: #E7AB4C; --lv-schools: #F08DB9; --lv-home: #E9EEF6;
  --dem: #4B90E6; --rep: #EC6C6B; --non: #9AA0AA;
  --sup-both: #26A07C; --sup-rep: #E5514F; --sup-dem: #3A87E5; --sup-pres: #93A0B6; --sup-split: #B4BED0; --sup-unknown: #5D6A84;
  --shadow-card: 0 1px 2px rgb(0 0 0 / 30%), 0 16px 40px -16px rgb(0 0 0 / 60%);
  color-scheme: dark;
}
@media (prefers-reduced-motion: reduce) { :root { --dur-quick: 0ms; --dur-move: 0ms; --dur-draw: 0ms; } }

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); }
body { margin: 0; color: var(--ink); font: var(--step-0)/1.55 var(--font-body); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.08; margin: 0; text-wrap: balance; letter-spacing: -0.015em; }
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--lv, var(--lv-washington)); outline-offset: 3px; border-radius: 6px; }

/* Shared pieces */
.face { --ring: var(--non); width: var(--size, 48px); height: var(--size, 48px); border-radius: 50%; border: 3px solid var(--ring); object-fit: cover; object-position: 50% 18%; background: var(--surface-2); flex: none; }
.face.D { --ring: var(--dem); } .face.R { --ring: var(--rep); }
.symbol { fill: none; stroke: currentColor; stroke-width: var(--stroke); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.btn { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-5); border-radius: var(--radius-round); background: var(--lv, var(--ink)); color: var(--surface); font-weight: 700; text-decoration: none; transition: transform var(--dur-quick) var(--ease-out); }
.btn:hover { transform: translateY(-1px); }
.muted { color: var(--ink-3); font-size: var(--step--1); }