/* Design tokens for the "Civic editorial" system.
   theme-init.js sets data-theme="light" or "dark" on <html> before first paint.
   Plain hex and rgba only: the browser floor is iOS 15.4 (no color-mix, light-dark, nesting, layers). */

:root {
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

  --fs-11: 0.6875rem;
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-36: 2.25rem;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  --dur-fast: 150ms;
  --dur: 240ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  --wrap: 1320px;
  --gutter: 16px;
  --toolbar-h: 112px; /* measured and updated by ui.js */
}
@media (min-width: 768px) { :root { --gutter: 24px; } }
@media (min-width: 1280px) { :root { --gutter: 32px; } }

/* ---------- light: warm paper ---------- */
:root,
[data-theme="light"] {
  color-scheme: light;
  --bg: #F7F5F0;
  --surface: #FFFFFF;
  --surface-2: #FBFAF7;
  --sunken: #F1EEE7;
  --hover: rgba(28, 26, 23, 0.045);
  --border: #E6E1D6;
  --border-strong: #D3CCBD;
  --text: #1C1A17;
  --text-2: #47433C;
  --text-3: #66625A;
  --accent: #885800;
  --accent-hover: #6B4500;
  --accent-fill: #E3A82B;
  --accent-fill-hover: #D69B1E;
  --on-accent: #1C1A17;
  --accent-tint: #FBF1D9;
  --accent-border: #E9C877;
  --focus: #885800;
  --scrim: rgba(28, 26, 23, 0.4);
  --toolbar-bg: rgba(247, 245, 240, 0.88);
  --shadow-1: 0 1px 2px rgba(28, 26, 23, 0.05), 0 1px 3px rgba(28, 26, 23, 0.04);
  --shadow-2: 0 8px 20px -6px rgba(28, 26, 23, 0.14), 0 2px 4px rgba(28, 26, 23, 0.04);
  --shadow-3: 0 28px 64px -16px rgba(28, 26, 23, 0.32), 0 8px 18px rgba(28, 26, 23, 0.08);

  --yes: #1D7347;
  --yes-tint: #E8F3EC;
  --yes-border: #AFD6C0;
  --no: #B0352B;
  --no-tint: #FBEBE9;
  --no-border: #EBBDB7;
  --conf-high: #1D7347;
  --conf-mod: #885800;
  --conf-low: #B9400C;

  --dem: #1E4FB5;   --dem-tint: #EAF0FB;  --dem-border: #C4D4F2;
  --rep: #B0352B;   --rep-tint: #FBEBE9;  --rep-border: #EBC1BC;
  --grn: #1D7347;   --grn-tint: #E8F3EC;  --grn-border: #B7D9C5;
  --lib: #9A4300;   --lib-tint: #FDEFE3;  --lib-border: #EECBAA;
  --pf: #6A3DB5;    --pf-tint: #F1EBFB;   --pf-border: #D5C6F0;
  --aip: #9E2F6C;   --aip-tint: #FBEAF3;  --aip-border: #EBC2D8;
  --npp: #4A5361;   --npp-tint: #EEF0F3;  --npp-border: #D3D8DF;
  --np: #0E6A6A;    --np-tint: #E4F3F2;   --np-border: #B4DAD8;

  --chart-other: #8A867D;
  --loader-box: #2A2722;
}

/* ---------- dark: graphite ---------- */
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0E1013;
  --surface: #171A20;
  --surface-2: #1C2027;
  --sunken: #121419;
  --hover: rgba(236, 234, 228, 0.05);
  --border: #2A2E36;
  --border-strong: #3B404A;
  --text: #ECEAE4;
  --text-2: #C9C6BF;
  --text-3: #A09E98;
  --accent: #F2C14E;
  --accent-hover: #F7D27A;
  --accent-fill: #F2C14E;
  --accent-fill-hover: #F7D27A;
  --on-accent: #1A1405;
  --accent-tint: rgba(242, 193, 78, 0.12);
  --accent-border: rgba(242, 193, 78, 0.38);
  --focus: #F2C14E;
  --scrim: rgba(0, 0, 0, 0.6);
  --toolbar-bg: rgba(14, 16, 19, 0.84);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 10px 24px -8px rgba(0, 0, 0, 0.55);
  --shadow-3: 0 32px 72px -16px rgba(0, 0, 0, 0.75);

  --yes: #62D49C;
  --yes-tint: rgba(98, 212, 156, 0.12);
  --yes-border: rgba(98, 212, 156, 0.36);
  --no: #F2918A;
  --no-tint: rgba(242, 145, 138, 0.12);
  --no-border: rgba(242, 145, 138, 0.36);
  --conf-high: #62D49C;
  --conf-mod: #F2C14E;
  --conf-low: #FB9A55;

  --dem: #93B4F8;   --dem-tint: rgba(147, 180, 248, 0.13);  --dem-border: rgba(147, 180, 248, 0.32);
  --rep: #F2968D;   --rep-tint: rgba(242, 150, 141, 0.13);  --rep-border: rgba(242, 150, 141, 0.32);
  --grn: #6ED4A1;   --grn-tint: rgba(110, 212, 161, 0.13);  --grn-border: rgba(110, 212, 161, 0.32);
  --lib: #F5A562;   --lib-tint: rgba(245, 165, 98, 0.13);   --lib-border: rgba(245, 165, 98, 0.32);
  --pf: #BBA3F6;    --pf-tint: rgba(187, 163, 246, 0.13);   --pf-border: rgba(187, 163, 246, 0.32);
  --aip: #F191C3;   --aip-tint: rgba(241, 145, 195, 0.13);  --aip-border: rgba(241, 145, 195, 0.32);
  --npp: #B8C0CB;   --npp-tint: rgba(184, 192, 203, 0.12);  --npp-border: rgba(184, 192, 203, 0.3);
  --np: #62D0CC;    --np-tint: rgba(98, 208, 204, 0.13);    --np-border: rgba(98, 208, 204, 0.32);

  --chart-other: #7E7C77;
  --loader-box: #262A33;
}