/*
 * Tokeny wyglądu przeliczmy.pl: kolory (tryb jasny i ciemny) i fonty. Wspólne dla strony głównej i kalkulatorów.
 * Inny serwis z tego repo nadpisuje część z nich we własnym motywie ładowanym po tym pliku (site-zycie/theme.css).
 * Role kolorów: docs/visual-language.md, sekcja 4. W pozostałych arkuszach używaj tylko tych zmiennych, nigdy wartości.
 *
 * Kontrast według WCAG 2.2 AA (sekcja 13): tekst ≥ 4,5:1, linie, paski i znaczniki ≥ 3:1 z tłem, na którym stoją.
 * Kolor linii zwykle nie wystarcza na tekst, więc kolory, którymi piszemy też podpisy na wykresie, mają parę -text
 * (ten sam odcień, ciemniejszy w trybie jasnym, jaśniejszy w ciemnym). Pilnuje tego test/contrast.test.mjs.
 */

:root {
  --bg: #ecf0f4;
  --surface: #ffffff;
  --sunken: #f5f7fa;
  --ink: #13202d;
  --muted: #566574;
  --line: #d3dbe3;
  --accent: #1d4ed8;
  --accent-soft: #e1e8fb;
  --low: #3b6ee8;
  --low-soft: #d6e1fb;
  --low-text: #2b5bd3;
  --high: #c2620e;
  --high-soft: #fbe3c8;
  --high-text: #a55000;
  --zero: #8a96a2;
  --zero-soft: #e9edf1;
  --good: #0d7c3a;
  --good-soft: #dcf3e3;
  --warn: #9d5f06;
  --warn-soft: #fbf0cf;
  --bad: #b91c1c;
  --bad-soft: #fbe1e1;

  /* Kolory kategorii (docs/visual-language.md, sekcja 4): tożsamość serii na jednym wykresie, objaśniana legendą.
     Składniki kwoty (netto, PIT, ZUS, zdrowotna), od dołu słupka. Dobrane 2026-11-01 i sprawdzone walidatorem palet,
     wszystkie pary: przy daltonizmie ΔE 10,0 (jasny) i 10,2 (ciemny), bez daltonizmu 21,2 i 18,9; kontrast ≥ 3:1
     z tłem wykresu i karty. Bez --high: złoty ZUS myli się z pomarańczowym progiem, więc progi na wykresie
     składników są neutralne (klasa threshold-neutral w calc.css). */
  --part-net: #634dd2;       /* fiolet */
  --part-pit: #f64782;       /* róż */
  --part-zus: #bb7e00;       /* złoty */
  --part-health: #189aa6;    /* morski */

  /* Opcje w porównaniu: miejsca 1–4 w stałej kolejności (1 = punkt odniesienia, np. etat; 2 = pierwsza alternatywa, np. B2B).
     Sprawdzone walidatorem palet w obu trybach, wszystkie pary razem z --high (progi na tym samym wykresie):
     4 opcje: najsłabsza para przy daltonizmie ΔE 8,6 (jasny) i 10,6 (ciemny), bez daltonizmu 15,2 i 16,2;
     3 opcje: 15,3 i 10,6; 2 opcje: 19,0 i 13,2. Kontrast ≥ 3:1 z tłem wykresu i karty w obu trybach; śliwka w ciemnym
     ma 3,01:1 z kartą i jaśniejsza być nie może, bo zlewa się z fioletem przy daltonizmie. Podpisy: --opt-N-text. */
  --opt-1: #2a98af;          /* turkus */
  --opt-1-soft: #d5eef2;
  --opt-1-text: #087c91;
  --opt-2: #7e1a9d;          /* śliwka */
  --opt-2-soft: #f0dcf5;
  --opt-2-text: #7e1a9d;
  --opt-3: #7c64fe;          /* fiolet */
  --opt-3-soft: #e6e7ff;
  --opt-3-text: #7157f0;
  --opt-4: #ab4a7d;          /* róż */
  --opt-4-soft: #fde1ed;
  --opt-4-text: #ab4a7d;

  /* Etapy życia na siatce tygodni (zyciewliczbach.pl, /zycie-w-tygodniach/): dzieciństwo, nauka, praca, emerytura,
     w tej kolejności, także w jasnym odcieniu (krycie w stylu produktu) dla tygodni przed osobą. Sprawdzone walidatorem
     palet 2026-11-05 na tłach obu serwisów: sąsiednie etapy (stykają się na siatce) przy daltonizmie ΔE ≥ 16,3 (jasny)
     i 12,9 (ciemny), bez daltonizmu ≥ 19,6; kontrast ≥ 3:1 z kartą i tłem wykresu. Nauka i emerytura nigdy się nie
     stykają (dzielą je lata pracy), a przy daltonizmie są bliżej (ΔE 8,0 i 5,8), więc etap ma też podpis w legendzie
     i w dymku. */
  --life-child: #b87d00;     /* złoty */
  --life-school: #009aa3;    /* morski */
  --life-work: #6247d8;      /* indygo */
  --life-retired: #e0447a;   /* róż */

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  /* Nagłówki i wielkie liczby. Na przeliczmy.pl ten sam co tekst; serwis może go zmienić we własnym motywie
     (np. site-zycie/theme.css), nie ruszając komponentów. */
  --font-head: var(--font);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d141b;
    --surface: #16202a;
    --sunken: #111a22;
    --ink: #e4ebf2;
    --muted: #a8b7c5;
    --line: #283541;
    --accent: #9bb7ff;
    --accent-soft: #1b2947;
    --low: #6f93ff;
    --low-soft: #1e2d52;
    --low-text: #9eb9fe;
    --high: #f0a94b;
    --high-soft: #3f2c12;
    --high-text: #f0a94b;
    --zero: #5e6b78;
    --zero-soft: #1f2a35;
    --good: #4ade80;
    --good-soft: #123222;
    --warn: #e9c062;
    --warn-soft: #352b10;
    --bad: #ff9a96;
    --bad-soft: #3a1717;
    --part-net: #9085e9;
    --part-pit: #c34776;
    --part-zus: #c98500;
    --part-health: #09aeae;
    --opt-1: #2a9cae;
    --opt-1-soft: #12343a;
    --opt-1-text: #59c3d5;
    --opt-2: #a430c8;
    --opt-2-soft: #33183f;
    --opt-2-text: #e298fe;
    --opt-3: #8a7dfa;
    --opt-3-soft: #292648;
    --opt-3-text: #b0adff;
    --opt-4: #9b5472;
    --opt-4-soft: #421e2d;
    --opt-4-text: #ec9ebd;
    --life-child: #be8300;
    --life-school: #0a9ea6;
    --life-work: #8577f0;
    --life-retired: #d65a8a;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }