:root {
  /* Tell the UA which color scheme our tokens target. With a single
     light theme today, declaring `light` keeps native form controls
     (date pickers, scrollbars on Windows, default <select> arrow)
     from rendering in OS-dark colors against the light token palette.
     A dark variant added via [data-theme="dark"] can override this
     with `light dark`. */
  color-scheme: light;
  /* Brand palette (immutable across themes) -------------------------------- */
  --brand-navy:   #0a1f4b;
  --brand-navy-2: #122a5f;
  --brand-cyan:   #5cd0e5;
  --brand-green:  #36c39a;
  --brand-purple: #9a6cf2;
  --brand-orange: #f0a830;
  --brand-ink:    #ffffff;

  /* Light theme (default) -------------------------------------------------- */
  --bg: #f5f7fb;
  --panel: #ffffff;
  --panel-2: #eef2f8;
  --border: #d6dde9;
  --text: #0a1426;
  --text-dim: #4a5670;

  --accent: #0a5fc7;
  --accent-dim: #d8eaf9;
  --accent-text: #ffffff;

  --warn: #b8731a;
  --danger: #c1392b;
  --good: #1f8e63;

  --suppressed: #6a6f7a;
  --raw: #8a90a0;
  --candidate: #b8731a;
  --reviewed: #0a5fc7;
  --accepted: #1f8e63;
  --rejected: #c1392b;
  --superseded: #6f3fc7;

  /* Graph Analysis edge-family palette (primary edge encoding). */
  --graph-edge-professional: #3b82f6;
  --graph-edge-personal: #f59e0b;
  --graph-edge-friend: #d946ef;
  --graph-edge-family: #22c55e;
  --graph-edge-unknown: #7b8aa5;

  /* Semantic surface tokens (used by toast/error/warning panels). Defined
     per-theme so banners stop hardcoding their own background hex. */
  --error-bg: #fbe9e7;
  --error-text: #6b1a14;
  --warn-bg: #fff4d6;
  --warn-text: #6b4a00;

  /* Type, spacing, radii, shadow tokens (additive scaffolding from
     hub-and-spoken-design-system/project/colors_and_type.css). The live
     CSS still uses literal values inline; new code should reach for these
     names so a future migration is mechanical. */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-xs:   10px;
  --fs-sm:   11px;
  --fs-13:   13px;
  --fs-md:   14px;
  --fs-15:   15px;
  --fs-h2:   18px;
  --fs-h1:   20px;
  --fs-name: 22px;
  --fs-hero: 24px;

  --lh-tight: 1.15;
  --lh-base:  1.45;

  --tracking-tight:   0.04em;
  --tracking-tag:     0.18em;
  --tracking-eyebrow: 0.32em;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 10px;
  --sp-4: 12px;
  --sp-5: 14px;
  --sp-6: 16px;
  --sp-7: 20px;
  --sp-8: 24px;

  --r-sm:    4px;
  --r-md:    6px;
  --r-lg:    8px;
  --r-xl:   10px;
  --r-pill: 999px;

  --sh-pop:    0 4px 12px rgba(0, 0, 0, 0.18);
  --sh-toast:  0 4px 16px rgba(0, 0, 0, 0.30);
  --sh-search: 0 8px 24px rgba(0, 0, 0, 0.40);
  --sh-modal:  0 24px 80px rgba(0, 0, 0, 0.28);

  --topbar-h: 48px;
  --handle-w: 6px;

  font-family: var(--font-sans);
}

:root[data-theme="dark"] {
  --bg: #0a1426;
  --panel: var(--brand-navy);
  --panel-2: var(--brand-navy-2);
  --border: #1d3a78;
  --text: #e6ecf7;
  --text-dim: #94a3c2;

  --accent: var(--brand-cyan);
  --accent-dim: #163a55;
  --accent-text: #0b1722;

  --warn: var(--brand-orange);
  --danger: #e57373;
  --good: var(--brand-green);

  --candidate: var(--brand-orange);
  --reviewed: var(--brand-cyan);
  --accepted: var(--brand-green);
  --rejected: #e57373;
  --superseded: var(--brand-purple);

  /* Keep high-contrast family colors in dark theme too. */
  --graph-edge-professional: #60a5fa;
  --graph-edge-personal: #fbbf24;
  --graph-edge-friend: #e879f9;
  --graph-edge-family: #4ade80;
  --graph-edge-unknown: #94a3b8;

  --error-bg: #2a1818;
  --error-text: #ffd9d9;
  --warn-bg: #3a2a14;
  --warn-text: var(--brand-orange);
}