/*
 * SaveNadi design tokens.
 *
 * Paper-white and ink-neutral. Hue is reserved:
 *   - the severity ramp means "exceeds a water-quality standard" and nothing else;
 *   - --system means a system or administrative state (network, feed, policy);
 *   - --accent means "you can act on this" (links, focus, the primary button).
 * Stale data carries no hue at all. Dark mode is its own set of steps, not an
 * automatic inversion.
 */

@font-face {
  font-family: "Plex Sans";
  src: url("/web/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plex Sans";
  src: url("/web/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plex Sans";
  src: url("/web/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plex Serif";
  src: url("/web/fonts/ibm-plex-serif-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("/web/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
/* Metric-matched fallbacks so the swap to Plex does not shift layout. */
@font-face {
  font-family: "Plex Sans Fallback";
  src: local("Arial");
  size-adjust: 100.6%; ascent-override: 102%; descent-override: 27%; line-gap-override: 0%;
}
@font-face {
  font-family: "Plex Serif Fallback";
  src: local("Georgia"), local("Times New Roman");
  size-adjust: 95%; ascent-override: 104%; descent-override: 28%; line-gap-override: 0%;
}

:root {
  color-scheme: light;

  --font-sans: "Plex Sans", "Plex Sans Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Plex Serif", "Plex Serif Fallback", Georgia, serif;
  --font-mono: "Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* Surfaces and ink */
  --bg: #fbfbfa;
  --surface: #ffffff;
  --surface-2: #f3f3f1;
  --line: #e2e2de;
  --line-strong: #8a8c93;
  --text: #16171a;
  --text-2: #52545b;
  --text-3: #6b6d74;

  /* Interaction */
  --accent: #2450b8;
  --accent-hover: #1c3f92;
  --accent-ink: #ffffff;
  --focus: #2450b8;

  /* Geography */
  --water: #7fa3c2;
  --water-fill: #dce4eb;
  --land: #f3f3f1;
  --boundary: #c4c4bf;

  /* Reserved meanings */
  --system: #a34e00;
  --ai: #5b6478;
  --ribbon-bg: #fff1d6;
  --ribbon-ink: #5a3a00;

  /* Water-quality severity: ordinal, always with glyph + word */
  --sev-ok: #6b6d74;
  --sev-warning: #876200;
  --sev-violation: #b93a0b;
  --sev-severe: #9f1239;
  --sev-severe-tint: #fbeff2;

  /* Freshness has no hue */
  --stale: #6b6d74;
  --nodata: #a3a5ab;

  /* Charts */
  --chart-grid: #e8e8e4;
  --chart-axis: #c3c2b7;
  --night: #f3f3f1;

  /* Geometry */
  --radius: 4px;
  --radius-lg: 8px;
  --shadow-overlay: 0 8px 24px rgba(16, 17, 20, 0.12);
  --control-h: 32px;
  --gutter: 24px;
  --content-max: 1440px;

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 120ms;
  --dur-panel: 200ms;
}

@media (pointer: coarse) {
  :root { --control-h: 44px; }
}
@media (max-width: 639px) {
  :root { --gutter: 16px; }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0c0d0f;
    --surface: #131417;
    --surface-2: #1b1c20;
    --line: #2a2b30;
    --line-strong: #6a6c73;
    --text: #ececee;
    --text-2: #a6a8af;
    --text-3: #8c8e95;
    --accent: #7fa3f5;
    --accent-hover: #a2bdf8;
    --accent-ink: #0c0d0f;
    --focus: #9db9ff;
    --water: #3e5e78;
    --water-fill: #1c2a36;
    --land: #16171a;
    --boundary: #33343a;
    --system: #f0a35a;
    --ai: #9aa3b8;
    --ribbon-bg: #3a2a0e;
    --ribbon-ink: #ffd99a;
    --sev-ok: #8c8e95;
    --sev-warning: #e3b448;
    --sev-violation: #ff8a5c;
    --sev-severe: #fb7185;
    --sev-severe-tint: #2a1219;
    --stale: #8c8e95;
    --nodata: #5c5e65;
    --chart-grid: #232428;
    --chart-axis: #383835;
    --night: #17181b;
    --shadow-overlay: 0 8px 24px rgba(0, 0, 0, 0.5);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0c0d0f;
  --surface: #131417;
  --surface-2: #1b1c20;
  --line: #2a2b30;
  --line-strong: #6a6c73;
  --text: #ececee;
  --text-2: #a6a8af;
  --text-3: #8c8e95;
  --accent: #7fa3f5;
  --accent-hover: #a2bdf8;
  --accent-ink: #0c0d0f;
  --focus: #9db9ff;
  --water: #3e5e78;
  --water-fill: #1c2a36;
  --land: #16171a;
  --boundary: #33343a;
  --system: #f0a35a;
  --ai: #9aa3b8;
  --ribbon-bg: #3a2a0e;
  --ribbon-ink: #ffd99a;
  --sev-ok: #8c8e95;
  --sev-warning: #e3b448;
  --sev-violation: #ff8a5c;
  --sev-severe: #fb7185;
  --sev-severe-tint: #2a1219;
  --stale: #8c8e95;
  --nodata: #5c5e65;
  --chart-grid: #232428;
  --chart-axis: #383835;
  --night: #17181b;
  --shadow-overlay: 0 8px 24px rgba(0, 0, 0, 0.5);
}