/* ============================================================================
   tokens.css — Find Your Vote shared design tokens (the design-system foundation)
   ----------------------------------------------------------------------------
   ONE source of truth for color, type, spacing, radius, shadow + shared components
   (the source-chip, used everywhere a datum needs visible source attribution per
   the civic-data quality rules). Consumed by BOTH the voter-facing cards and the
   research/admin tools so the two surfaces never drift. Pure tokens + a few atoms;
   no page-specific layout here.
   ============================================================================ */

:root {
  /* ── brand + civic palette (neutral; never partisan red/blue dominant) ── */
  --fyv-ink:        #1a2233;   /* primary text */
  --fyv-ink-soft:   #4a5568;   /* secondary text */
  --fyv-ink-faint:  #8a94a6;   /* tertiary / source text */
  --fyv-line:       #e3e8ef;   /* hairline borders */
  --fyv-surface:    #ffffff;
  --fyv-surface-2:  #f6f8fb;   /* panel / table-zebra */
  --fyv-surface-3:  #eef2f7;   /* chip / inset */

  --fyv-brand:      #2563eb;   /* primary action (civic blue) */
  --fyv-brand-ink:  #1d4ed8;
  --fyv-accent:     #7c3aed;   /* facts / evidence accent */

  /* ── semantic (audit + score health) ── */
  --fyv-ok:    #15803d;  --fyv-ok-bg:   #e7f6ec;
  --fyv-warn:  #b45309;  --fyv-warn-bg: #fdf3e3;
  --fyv-bad:   #b91c1c;  --fyv-bad-bg:  #fdeaea;
  --fyv-info:  #0369a1;  --fyv-info-bg: #e6f3fb;

  /* ── typography ── */
  --fyv-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fyv-mono: "SF Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  --fyv-fs-xs: 11.5px; --fyv-fs-sm: 13px; --fyv-fs-md: 14.5px;
  --fyv-fs-lg: 17px;   --fyv-fs-xl: 22px; --fyv-fs-2xl: 30px;
  --fyv-fw-reg: 400; --fyv-fw-med: 550; --fyv-fw-bold: 700;
  --fyv-lh: 1.5;

  /* ── spacing (4px base) ── */
  --fyv-s1: 4px;  --fyv-s2: 8px;  --fyv-s3: 12px; --fyv-s4: 16px;
  --fyv-s5: 24px; --fyv-s6: 32px; --fyv-s7: 48px;

  /* ── radius + shadow ── */
  --fyv-r-sm: 6px; --fyv-r-md: 10px; --fyv-r-lg: 16px; --fyv-r-pill: 999px;
  --fyv-shadow-1: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.04);
  --fyv-shadow-2: 0 4px 12px rgba(16,24,40,.08);
}

/* ── shared atoms ──────────────────────────────────────────────────────── */

/* The source chip — visible source NAME + date on every datum (civic-data rule 4).
   Use: <span class="source-chip">FEC, as of 2026-04-30</span> */
.source-chip {
  display: inline-flex; align-items: center; gap: var(--fyv-s1);
  font-size: var(--fyv-fs-xs); color: var(--fyv-ink-faint);
  background: var(--fyv-surface-3); border: 1px solid var(--fyv-line);
  border-radius: var(--fyv-r-pill); padding: 1px var(--fyv-s2);
  white-space: nowrap; vertical-align: middle;
}
.source-chip::before { content: "▪"; color: var(--fyv-brand); font-size: 9px; }
.source-chip.is-missing { color: var(--fyv-bad); background: var(--fyv-bad-bg); border-color: transparent; }
.source-chip.is-missing::before { color: var(--fyv-bad); }

/* Audit severity badges */
.fyv-badge { display: inline-block; font-size: var(--fyv-fs-xs); font-weight: var(--fyv-fw-med);
  border-radius: var(--fyv-r-sm); padding: 1px var(--fyv-s2); }
.fyv-badge.ok   { color: var(--fyv-ok);   background: var(--fyv-ok-bg); }
.fyv-badge.warn { color: var(--fyv-warn); background: var(--fyv-warn-bg); }
.fyv-badge.bad  { color: var(--fyv-bad);  background: var(--fyv-bad-bg); }
.fyv-badge.info { color: var(--fyv-info); background: var(--fyv-info-bg); }

/* Score health dot (0-100 normalized) — neutral grey→ink, never red/green by party */
.fyv-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--fyv-ink-faint); }

:root{--fyv-ink:#edf3fb;--fyv-ink-soft:#c1ccdb;--fyv-ink-faint:#a2b1c7;--fyv-surface:#17202c;--fyv-surface-2:#0d141d;--fyv-surface-3:#263247;--fyv-line:#3c4b61;--fyv-brand:#4b83c5;--fyv-brand-ink:#3466a4}input,textarea{color:var(--fyv-ink);background:var(--fyv-surface)!important}.wrap{overflow-x:auto}