/* Design tokens shared by the TV and mobile pages. Fonts are self-hosted (Barlow, SIL OFL; see /fonts/OFL-LICENSE.txt). */

@font-face { font-family: 'Barlow'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/barlow-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 500; font-style: normal; font-display: swap; src: url('/fonts/barlow-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 600; font-style: normal; font-display: swap; src: url('/fonts/barlow-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 700; font-style: normal; font-display: swap; src: url('/fonts/barlow-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 500; font-style: normal; font-display: swap; src: url('/fonts/barlow-condensed-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 600; font-style: normal; font-display: swap; src: url('/fonts/barlow-condensed-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 700; font-style: normal; font-display: swap; src: url('/fonts/barlow-condensed-latin-700-normal.woff2') format('woff2'); }

:root {
  color-scheme: dark;

  /* Surfaces and ink (dark is the default; the TV is always dark). */
  --bg: #0f1316;
  --surface: #171c20;
  --surface-2: #1f262b;
  --line: #2b343b;
  --ink: #f3f5f6;
  --ink-2: #bcc5cb;
  --ink-3: #8a959c;
  --accent: #7fd0e0;

  /* Status palette: fixed in every theme (dataviz status palette). Always paired with an icon and a label. */
  --sev-0: #0ca30c;   /* clear */
  --sev-1: #fab219;   /* caution: slippery, snow */
  --sev-2: #ec835a;   /* difficult: snow cover, packed snow */
  --sev-3: #d03b3b;   /* closed / impassable */
  --sev-n: #6b767d;   /* no data */
  --sev-0-on: #07140a;
  --sev-1-on: #1d1500;
  --sev-2-on: #240d03;
  --sev-3-on: #ffffff;

  /* The map is dark in every theme so the status colours keep their contrast. */
  --map-bg: #0c1013;
  --map-grid: #181f24;
  --map-ink: #f3f5f6;
  --map-ink-2: #aeb8be;

  --font: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-cond: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
  --radius: 10px;
}

:root[data-theme='light'] {
  color-scheme: light;
  --bg: #f1f3f4;
  --surface: #ffffff;
  --surface-2: #e8ecee;
  --line: #d5dbde;
  --ink: #12181c;
  --ink-2: #44505a;
  --ink-3: #6c7881;
  --accent: #0b6f86;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) {
    color-scheme: light;
    --bg: #f1f3f4;
    --surface: #ffffff;
    --surface-2: #e8ecee;
    --line: #d5dbde;
    --ink: #12181c;
    --ink-2: #44505a;
    --ink-3: #6c7881;
    --accent: #0b6f86;
  }
}

.sevi .shape { fill: var(--sev-n); }
.sevi.sev-0 .shape { fill: var(--sev-0); }
.sevi.sev-1 .shape { fill: var(--sev-1); }
.sevi.sev-2 .shape { fill: var(--sev-2); }
.sevi.sev-3 .shape { fill: var(--sev-3); }
.sevi .mark { fill: none; stroke: #0b0f11; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.sevi .mark-fill { fill: #0b0f11; stroke: none; }
.sevi.sev-3 .mark { stroke: #fff; }
.sevi.sev-3 .mark-fill { fill: #fff; }
.sevi.sev-n .shape { fill: none; stroke: var(--sev-n); stroke-width: 2; stroke-dasharray: 3 3; }
.sevi.sev-n .mark { stroke: var(--sev-n); }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }