/* Design tokens. Light is the default; the dark block is applied by html[data-theme="dark"] (set before first paint by js/theme-init.js).
   Every text/background pair is checked for WCAG AA by platform/tests/contrast_check.py, which parses this file. */

@font-face { font-family: "General Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("../assets/fonts/general-sans-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 100 900; font-style: normal; font-display: swap; src: url("../assets/fonts/inter-var.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono"; font-weight: 100 900; font-style: normal; font-display: swap; src: url("../assets/fonts/geist-mono-var.woff2") format("woff2"); }

:root {
  color-scheme: light;
  /* surfaces */
  --bg: #f4f4f1;
  --surface: #ffffff;
  --surface-2: #f7f7f5;
  --surface-3: #ecece8;
  --scrim: rgba(18, 19, 21, 0.45);
  /* text */
  --fg: #121315;
  --fg-2: #474a50;
  --fg-3: #5f6269;
  --on-accent: #ffffff;
  /* lines */
  --line: #e2e2dd;
  --line-2: #c4c4be;
  /* brand and states */
  --accent: #c8153f;
  --accent-soft: #fde9ee;
  --focus: #1f5fd1;
  --ok: #0b6e50;
  --ok-soft: #e1f4ec;
  --warn: #8a5a00;
  --warn-soft: #fbf0d8;
  --err: #b3261e;
  --err-soft: #fce8e6;
  --info: #1b6fa8;
  --info-soft: #e3f0f9;
  /* data series (indicators of the priority score), >= 3:1 on --surface */
  --c-heat-day: #c2410c;
  --c-heat-night: #6d3fd6;
  --c-vulnerable: #1c6fc4;
  --c-sensitive: #0b7a62;
  --c-stops: #6b7280;
  --c-gain: #a86400;
  /* map */
  --map-bg: #e9e9e4;
  --map-pin: #c8153f;

  /* type */
  --f-display: "General Sans", "Inter", system-ui, sans-serif;
  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-2xs: 0.6875rem;  /* 11 */
  --fs-xs: 0.75rem;     /* 12 */
  --fs-sm: 0.8125rem;   /* 13 */
  --fs-md: 0.875rem;    /* 14 */
  --fs-lg: 1rem;        /* 16 */
  --fs-xl: 1.25rem;     /* 20 */
  --fs-2xl: 1.75rem;    /* 28 */
  --fs-3xl: 2.5rem;     /* 40 */

  /* spacing, 4 px grid */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;
  /* radius and shadow */
  --r-sm: 4px; --r: 6px; --r-lg: 10px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(18, 19, 21, 0.06), 0 0 0 1px rgba(18, 19, 21, 0.04);
  --shadow-2: 0 4px 12px rgba(18, 19, 21, 0.10), 0 0 0 1px rgba(18, 19, 21, 0.05);
  --shadow-3: 0 12px 32px rgba(18, 19, 21, 0.16), 0 0 0 1px rgba(18, 19, 21, 0.06);
  /* motion */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur: 160ms;
  /* layout */
  --header-h: 52px;
  --nav-h: 60px;
  --left-w: 392px;
  --right-w: 340px;
  --z-panel: 10; --z-header: 30; --z-sheet: 40; --z-modal: 80; --z-toast: 90;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0c0d0e;
  --surface: #131416;
  --surface-2: #191b1d;
  --surface-3: #222427;
  --scrim: rgba(0, 0, 0, 0.6);
  --fg: #f2f1ee;
  --fg-2: #bdbcb8;
  --fg-3: #93928e;
  --on-accent: #1a0006;
  --line: #26282b;
  --line-2: #3d4045;
  --accent: #ff6b90;
  --accent-soft: #3a1522;
  --focus: #85b4ff;
  --ok: #4fd1a5;
  --ok-soft: #12302a;
  --warn: #f2c14e;
  --warn-soft: #33290f;
  --err: #ff8f84;
  --err-soft: #3a1815;
  --info: #7fc8ff;
  --info-soft: #14283a;
  --c-heat-day: #ff8a4c;
  --c-heat-night: #a98bff;
  --c-vulnerable: #6cb2ff;
  --c-sensitive: #3fd1ae;
  --c-stops: #9aa3af;
  --c-gain: #f2b84b;
  --map-bg: #15171a;
  --map-pin: #ff6b90;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
}
