/* Tokeny kolorów: jasny „Chłodna mgła” (domyślny), ciemny „Instrument nocny” (system albo data-theme="dark").
   Wartości z makiet (full_mock.py: THEMES, LVL, ALARM_OP). Mieszanki z przezroczystością jako gotowe rgba (mieszanie kolorów w CSS wymaga Chrome ≥ 111). */

:root {
  color-scheme: light;
  --bg: #eef1f4; --surface: #ffffff; --surface2: #f4f6f8; --line: #cbd2da;
  --text: #121519; --muted: #4f5966; --sea: #dfe5ea; --land: #f4f6f8;
  --border: #c9d0d8; --pl-fill: #ffffff; --ink: #1a1e24;
  --alarm: #d4261f; --info: #6d55c4; --flank: #d96a00; --second: #b58f00; --ok: #1d8a50;
  --on-alarm: #fff;        /* licznik na --alarm: biel 4,9:1 w jasnym */
  --knob: #ffffff;         /* gałka przełącznika na --line / --ok */

  /* wypełnienie poziomu i tekst na nim — wspólne dla obu motywów */
  --lvl-calm: #8a929c; --lvl-watch: #f2c200; --lvl-threat: #ff8a1f; --lvl-high: #e2312b;
  --on-lvl-calm: #0a0d12; --on-lvl-watch: #000; --on-lvl-threat: #000; --on-lvl-high: #fff;
  /* linie poziomu (ramka, kontury) — ciemniejsze w jasnym motywie dla kontrastu 3:1 */
  --lvl-calm-line: #6b737d; --lvl-watch-line: #8f7000; --lvl-threat-line: #c45a00; --lvl-high-line: #c8231b;

  --wave: #c45a00;
  --track: #0f8796;        /* obiekty w powietrzu (NEPTUN); 3:1 do --surface przez obwódkę --surface pod znacznikiem */
  --alarm-op: .42;

  --alarm-a50: rgba(212, 38, 31, .5);
  --info-a30: rgba(109, 85, 196, .3);
  --flank-a14: rgba(217, 106, 0, .14);
  --second-a10: rgba(181, 143, 0, .1);
  --text-a08: rgba(18, 21, 25, .08);

  /* Alert RCB: pas i odznaka karty, hatch województw na mapie; odróżnialny od --alarm, --info, --flank i --track */
  --rcb: #a3195b; --on-rcb: #fff; --rcb-a14: rgba(163, 25, 91, .14);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0a0d12; --surface: #11161d; --surface2: #18202a; --line: #2a3340;
    --text: #e8ecf1; --muted: #a3adba; --sea: #10151c; --land: #151b23;
    --border: #232c37; --pl-fill: #1b222c; --ink: #e8ecf1;
    --alarm: #f0453c; --info: #a08ce0; --flank: #ff9a3c; --second: #e8c547; --ok: #2fb36b;
    --on-alarm: #000;      /* biel na jaśniejszym --alarm ma tylko 3,6:1 */
    --knob: #e8ecf1;
    --lvl-calm-line: #8a929c; --lvl-watch-line: #f2c200; --lvl-threat-line: #ff8a1f; --lvl-high-line: #ff4a3d;
    --wave: #ff8a1f;
    --track: #2cc6d6;
    --alarm-op: .5;
    --alarm-a50: rgba(240, 69, 60, .5);
    --info-a30: rgba(160, 140, 224, .3);
    --flank-a14: rgba(255, 154, 60, .14);
    --second-a10: rgba(232, 197, 71, .1);
    --text-a08: rgba(232, 236, 241, .08);
    --rcb: #ff7ab8; --on-rcb: #000; --rcb-a14: rgba(255, 122, 184, .16);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a0d12; --surface: #11161d; --surface2: #18202a; --line: #2a3340;
  --text: #e8ecf1; --muted: #a3adba; --sea: #10151c; --land: #151b23;
  --border: #232c37; --pl-fill: #1b222c; --ink: #e8ecf1;
  --alarm: #f0453c; --info: #a08ce0; --flank: #ff9a3c; --second: #e8c547; --ok: #2fb36b;
  --on-alarm: #000;
  --knob: #e8ecf1;
  --lvl-calm-line: #8a929c; --lvl-watch-line: #f2c200; --lvl-threat-line: #ff8a1f; --lvl-high-line: #ff4a3d;
  --wave: #ff8a1f;
  --track: #2cc6d6;
  --alarm-op: .5;
  --alarm-a50: rgba(240, 69, 60, .5);
  --info-a30: rgba(160, 140, 224, .3);
  --flank-a14: rgba(255, 154, 60, .14);
  --second-a10: rgba(232, 197, 71, .1);
  --text-a08: rgba(232, 236, 241, .08);
  --rcb: #ff7ab8; --on-rcb: #000; --rcb-a14: rgba(255, 122, 184, .16);
}

/* Bieżący poziom: klasa na <html>. Poziom tylko przy świeżych danych; w każdym innym stanie lvl-none (neutralnie). */
:root, .lvl-none { --lvl: var(--muted); --lvl-line: var(--muted); --on-lvl: var(--bg); }
.lvl-calm { --lvl: var(--lvl-calm); --lvl-line: var(--lvl-calm-line); --on-lvl: var(--on-lvl-calm); }
.lvl-watch { --lvl: var(--lvl-watch); --lvl-line: var(--lvl-watch-line); --on-lvl: var(--on-lvl-watch); }
.lvl-threat { --lvl: var(--lvl-threat); --lvl-line: var(--lvl-threat-line); --on-lvl: var(--on-lvl-threat); }
.lvl-high { --lvl: var(--lvl-high); --lvl-line: var(--lvl-high-line); --on-lvl: var(--on-lvl-high); }