/* GENEROWANY przez tools/buduj_tokeny.py - nie edytuj recznie.
   Zrodla: brand/tokens/kolory.json, typografia.json, przestrzen.json */


:root {
  color-scheme: light dark;

  --kolor-tlo-strony: #F4F4F4;
  --kolor-tlo-karty: #FFFFFF;
  --kolor-tekst-glowny: #161616;
  --kolor-tekst-drugorzedny: #525252;
  --kolor-akcent: #0F62FE;
  --kolor-akcent-hover: #0043CE;
  --kolor-tekst-na-akcencie: #FFFFFF;
  --kolor-obramowanie: #E0E0E0;
  --kolor-obramowanie-pola: #6F6F6F;
  --kolor-sukces: #198038;
  --kolor-blad: #DA1E28;

  --kroj-naglowkowy: "Archivo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --kroj-tekstowy: "Figtree", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --tekst-drobny: 13px;
  --tekst-maly: 14px;
  --tekst-bazowy: 16px;
  --tekst-sredni: 20px;
  --tekst-duzy: 25px;
  --tekst-naglowek-3: 31px;
  --tekst-naglowek-2: 39px;
  --tekst-naglowek-1: 49px;

  --interlinia-ciasna: 1.15;
  --interlinia-naglowkowa: 1.25;
  --interlinia-tekstowa: 1.6;

  --odstep-1: 4px;
  --odstep-2: 8px;
  --odstep-3: 12px;
  --odstep-4: 16px;
  --odstep-5: 24px;
  --odstep-6: 32px;
  --odstep-7: 48px;
  --odstep-8: 64px;
  --odstep-9: 96px;

  --promien-maly: 6px;
  --promien-sredni: 10px;
  --promien-duzy: 16px;
  --promien-pelny: 999px;

  --siatka-maks-szerokosc: 1200px;
  --siatka-kolumny: 12;
  --siatka-rynna: 24px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --kolor-tlo-strony: #161616;
    --kolor-tlo-karty: #262626;
    --kolor-tekst-glowny: #F4F4F4;
    --kolor-tekst-drugorzedny: #C6C6C6;
    --kolor-akcent: #78A9FF;
    --kolor-akcent-hover: #A6C8FF;
    --kolor-tekst-na-akcencie: #161616;
    --kolor-obramowanie: #393939;
    --kolor-obramowanie-pola: #8D8D8D;
    --kolor-sukces: #42BE65;
    --kolor-blad: #FF8389;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --kolor-tlo-strony: #161616;
  --kolor-tlo-karty: #262626;
  --kolor-tekst-glowny: #F4F4F4;
  --kolor-tekst-drugorzedny: #C6C6C6;
  --kolor-akcent: #78A9FF;
  --kolor-akcent-hover: #A6C8FF;
  --kolor-tekst-na-akcencie: #161616;
  --kolor-obramowanie: #393939;
  --kolor-obramowanie-pola: #8D8D8D;
  --kolor-sukces: #42BE65;
  --kolor-blad: #FF8389;
}

:root[data-theme="light"] {
  color-scheme: light;
}

body {
  background: var(--kolor-tlo-strony);
  color: var(--kolor-tekst-glowny);
  font-family: var(--kroj-tekstowy);
  font-size: var(--tekst-bazowy);
  line-height: var(--interlinia-tekstowa);
}