/* Designsystemet för Trafikradar: färger, typsnitt, radier och skuggor som CSS-variabler.
   Ljust läge följer skisserna i riktning A. Mörkt läge är nattläget: det följer systemet, och månknappen (js/night.js) väljer själv.
   Använd variablerna i all ny CSS i stället för fasta färger, så att mörkt läge och nattläget fungerar.

   Ytor:        --bg (kartans grund), --panel (ark och kort), --surface-2 (rutor i kort), --line (linjer)
   Text:        --fg, --text-2 (brödtext i andra hand), --muted (etiketter)
   Accent:      --accent, --accent-soft (bakgrund för valt), --on-accent (text på accentfärg)
   Status:      --ok, --warn, --bad är textfärger som klarar 4,5:1 mot --panel.
                --ok-bg, --warn-bg, --bad-bg är ljusa bakgrunder, --warn-dot en fyllnad för punkter och linjer.
                --live är den gröna punkten i "Live".
   Typsnitt:    --font (Overpass), --mono (Overpass Mono). Båda serveras från /fonts som variabla typsnitt
                (alla vikter 100–900 i en fil, latinska tecken), så sidan inte väntar på Google Fonts.
   Radier:      --r-sm (6), --r-md (10), --r-lg (16), --r-xl (20), --r-pill
   Skuggor:     --shadow-1 (knappar på kartan), --shadow-2 (flytande fält), --shadow-3 (arket och panelen) */

/* Overpass och Overpass Mono från @fontsource-variable (SIL OFL 1.1, se fonts/LICENSE) */
@font-face {
  font-family: "Overpass";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/overpass-latin-wght.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Overpass Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url(/fonts/overpass-mono-latin-wght.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #f2f4f1;
  --panel: #ffffff;
  --surface-2: #f3f5f7;
  --line: #dce2e8;
  --fg: #121a23;
  --text-2: #3f4b57;
  --muted: #5a6876;
  --accent: #0a5bd6;
  --accent-soft: #eef3fb;
  --on-accent: #ffffff;
  --ok: #1a7f45;
  --ok-bg: #e3f3ea;
  --warn: #8a5000;
  --warn-bg: #fff1db;
  --warn-dot: #e0812b;
  --bad: #c2261f;
  --bad-bg: #fde6e4;
  --live: #1a9a50;
  --chip-on: #dde8fb;
  --chip-on-fg: #0a4fb8;
  --handle: #cbd3db;

  --font: "Overpass", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Overpass Mono", ui-monospace, "SF Mono", Menlo, monospace;

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

  --shadow-1: 0 2px 8px rgba(18, 26, 35, .14);
  --shadow-2: 0 4px 18px rgba(18, 26, 35, .16);
  --shadow-3: 0 8px 32px rgba(18, 26, 35, .16);

  color-scheme: light;
}

/* Mörkt läge (nattläget). Skriptet i <head> och js/night.js sätter data-night="on" när systemet är mörkt eller man har valt mörkt. */
:root[data-night="on"] {
  --bg: #06090d; --panel: #0d141b; --fg: #d6dde4; --muted: #8292a2; --line: #1f2a36;
  --accent: #5c9bff; --ok: #3fbf74; --warn: #f0a92c; --bad: #ff5d52; color-scheme: dark;
  --surface-2: #16202b; --text-2: #b4c0cc; --accent-soft: #15263d; --on-accent: #06090d;
  --ok-bg: #11291d; --warn-bg: #2f2210; --warn-dot: #f0a92c; --bad-bg: #321717; --live: #3fbf74;
  --chip-on: #d6dde4; --chip-on-fg: #06090d; --handle: #2a3542;
}