/* ==========================================================================
   MASTER STYL
   Jedyne miejsce, w ktorym wolno napisac wartosc koloru, rozmiaru albo czasu.
   Kontrolki znaja WYLACZNIE nazwy tokenow. Bramka odrzuca kazdy literal
   poza tym plikiem, a czysta biel i czern odrzuca takze tutaj.

   Punkt wyjscia: 16 zmiennych z prototypu RSM, sprawdzonych w boju.
   Rozszerzone o to, czego potrzebuje biblioteka kontrolek, a czego makieta
   prezentacyjna nie potrzebowala: skala odstepow, wysokosci, warstwy, stany.

   Zapis w OKLCH, bo pozwala podbarwic neutralne w strone barwy marki
   bez zgadywania, czego w zapisie szesnastkowym nie da sie zrobic czysto.

   DWIE ZASADY, KTORE TRZYMAJA TO W KUPIE
   1. Kontrolka nie zna zadnego koloru. Zna nazwy tokenow. Motyw klienta
      podstawia wartosci i nic wiecej.
   2. MARKA SLUZY INTERAKCJI, STANY ZNACZENIU. Marka pojawia sie na skupieniu,
      zaznaczeniu i dzialaniu glownym. Stany pojawiaja sie przy komunikacie
      o wyniku. Nigdy w tej samej roli, bo przy zielonej marce zielone
      powodzenie byloby nieczytelne.
   ========================================================================== */

/* Reset pudelka. Bez tego pole o szerokosci 100% z wypelnieniem wychodzi
   poza swoja komorke siatki o szerokosc wypelnienia; w pokazach tego nie
   bylo widac, bo formularz mial luz, w karcie logowania juz tak. */
*, *::before, *::after { box-sizing: border-box; }

:root {

  /* --- BARWA MARKI. Jedno miejsce podstawienia dla generatora motywu. ---- */
  --marka-barwa: 146;                  /* odcien w OKLCH, tu zielen RSM */

  --marka: oklch(62% .19 var(--marka-barwa));
  --marka-ciemna: oklch(50% .16 var(--marka-barwa));
  --marka-mgla: oklch(95.5% .03 var(--marka-barwa));

  /* --- MIARA. Wszystko jest wielokrotnoscia jednostki. ------------------- */
  --u: 4px;

  --odstep-1: calc(var(--u) * 1);      /*  4 */
  --odstep-2: calc(var(--u) * 2);      /*  8 */
  --odstep-3: calc(var(--u) * 3);      /* 12 */
  --odstep-4: calc(var(--u) * 4);      /* 16 */
  --odstep-6: calc(var(--u) * 6);      /* 24 */
  --odstep-8: calc(var(--u) * 8);      /* 32 */
  --odstep-12: calc(var(--u) * 12);    /* 48 */

  --promien-1: 3px;                    /* pola, przyciski */
  --promien-2: 6px;                    /* karty, okna */
  --promien-pelny: 999px;              /* plakietki, przelaczniki */

  /* --- POWIERZCHNIE. Neutralne podbarwione w strone marki, chroma .004 do .010 */
  --papier: oklch(98.2% .005 var(--marka-barwa));       /* tlo strony */
  --plyta: oklch(99.3% .002 var(--marka-barwa));        /* tlo karty, zlamana biel */
  --plyta-2: oklch(96.4% .008 var(--marka-barwa));      /* tlo zaglebione */

  --pole-tlo: oklch(99.3% .002 var(--marka-barwa));
  --pole-tlo-wylaczone: oklch(96.4% .008 var(--marka-barwa));
  --pole-tlo-blad: oklch(97.2% .012 27);

  /* --- TEKST ------------------------------------------------------------- */
  --atrament: oklch(22% .012 var(--marka-barwa));       /* wartosc, tresc glowna */
  --atrament-2: oklch(45% .010 var(--marka-barwa));     /* etykieta, tekst pomocniczy */
  --atrament-3: oklch(62% .010 var(--marka-barwa));     /* podpowiedz, tekst wygaszony */
  --atrament-jednostka: oklch(62% .010 var(--marka-barwa));

  /* --- LINIE ------------------------------------------------------------- */
  --kreska: oklch(92.5% .008 var(--marka-barwa));       /* obramowanie karty, linia tabeli */
  --kreska-2: oklch(86% .010 var(--marka-barwa));       /* obramowanie mocniejsze */

  --pole-kreska: oklch(86% .010 var(--marka-barwa));
  --pole-kreska-mocna: oklch(72% .012 var(--marka-barwa));  /* pole pod kursorem */

  /* --- STANY ZNACZENIOWE. Odcienie stale, niezalezne od marki. ----------- */
  --alarm: oklch(46% .16 27);
  --alarm-mgla: oklch(96.5% .02 27);
  --ostrzezenie: oklch(52% .11 70);
  --ostrzezenie-mgla: oklch(96.5% .03 70);
  --powodzenie: oklch(48% .10 168);                     /* zielen z przechyleniem
                                                           w morska, zeby nie zlewala
                                                           sie z zielenia marki */
  --powodzenie-mgla: oklch(96% .025 168);
  --informacja: oklch(45% .12 250);
  --informacja-mgla: oklch(96% .02 250);

  --atrament-blad: var(--alarm);

  /* --- WYSOKOSCI KONTROLEK, trzy zageszczenia --------------------------- */
  --wys-kontrolki-geste: calc(var(--u) * 7);    /* 28, tabele i siatka pozycji */
  --wys-kontrolki: calc(var(--u) * 9);          /* 36, domyslna na formularzu */
  --wys-kontrolki-luzne: calc(var(--u) * 11);   /* 44, cel dotykowy i ekrany zewnetrzne */

  /* --- TYPOGRAFIA. Skok miedzy stopniami nie mniejszy niz 1,25. ---------- */
  --ui: "Segoe UI Variable Text", "Segoe UI", -apple-system, system-ui, sans-serif;
  --cyfry: "Cascadia Mono", Consolas, "SF Mono", ui-monospace, monospace;

  --tekst-etykieta: 500 12px/1.4 var(--ui);
  --tekst-wartosc: 400 14px/1.45 var(--ui);
  --tekst-pomoc: 400 12px/1.45 var(--ui);
  --tekst-blad: 500 12px/1.45 var(--ui);
  --tekst-naglowek: 600 18px/1.25 var(--ui);
  --tekst-tytul: 600 20px/1.2 var(--ui);           /* tytul widoku, znak w menu */
  --tekst-liczba: 400 14px/1.45 var(--cyfry);   /* kwoty i ilosci, cyfry stalej szerokosci */

  /* --- SKUPIENIE. Jedno na cala biblioteke, zawsze widoczne. ------------ */
  --pierscien: 2px;
  --pierscien-odstep: 1px;

  /* --- RUCH. Trzy czasy, jedna krzywa, wszystko ponizej 300 ms.
         Krzywa jest wygaszajaca. Przyspieszajacej w interfejsie nie ma. --- */
  --wyjscie: cubic-bezier(.23, 1, .32, 1);
  --czas-1: 90ms;                      /* zmiana koloru, podswietlenie */
  --czas-2: 120ms;                     /* rozwiniecie i zwiniecie */
  --czas-3: 180ms;                     /* wejscie okna i powiadomienia */

  --wcisniecie: scale(.97);            /* jedno na cala biblioteke */

  /* --- KOLEJNOSC NAKLADANIA. Bez tego pierwsza lista rozwijana schowa sie
         pod naglowkiem, i jest to blad, ktorego nikt nie przewiduje. ------ */
  --warstwa-tresc: 0;
  --warstwa-przyklejone: 10;           /* naglowek tabeli, pasek narzedzi */
  --warstwa-nawigacja: 20;             /* menu, panel boczny */
  --warstwa-lista: 30;                 /* lista rozwijana, kalendarz, podpowiedz pola */
  --warstwa-okno: 40;                  /* okno modalne i przyslona */
  --warstwa-powiadomienie: 50;         /* komunikat, zawsze nad wszystkim */
  --warstwa-podpowiedz: 60;            /* dymek, nad oknem tez */

  /* --- CIENIE. Dwa, wylacznie do oderwania od tla. Cien barwiony
         atramentem, nie czernia, zeby nie brudzil. ----------------------- */
  --przyslona: oklch(22% .012 var(--marka-barwa) / .35);   /* tlo pod oknem */
  --cien-lista: 0 4px 12px oklch(22% .012 var(--marka-barwa) / .10);
  --cien-okno: 0 12px 32px oklch(22% .012 var(--marka-barwa) / .16);
}

/* ==========================================================================
   ZAGESZCZENIE. Ustawiane na kontenerze, nie na kontrolce.
   Formularz deklaruje raz, kontrolki sie dostosowuja.
   ========================================================================== */
:root,
[data-zageszczenie="zwykle"] { --wys-aktualna: var(--wys-kontrolki); }
[data-zageszczenie="geste"]  { --wys-aktualna: var(--wys-kontrolki-geste); }
[data-zageszczenie="luzne"]  { --wys-aktualna: var(--wys-kontrolki-luzne); }

/* ==========================================================================
   WYGASZENIE RUCHU. Jedno miejsce dla calej biblioteki. Kontrolka nie musi
   o tym pamietac, ale bramka i tak sprawdza kazda osobno.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --czas-1: 0ms;
    --czas-2: 0ms;
    --czas-3: 0ms;
    --wcisniecie: none;
  }
}

/* ==========================================================================
   MOTYW CIEMNY. Podmieniamy WYLACZNIE powierzchnie, tekst i linie.
   Marka i stany znaczeniowe zostaja, bo zielen klienta ma byc zielenia
   klienta niezaleznie od motywu.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-motyw="jasny"]) {
    --papier: oklch(17% .010 var(--marka-barwa));
    --plyta: oklch(21% .012 var(--marka-barwa));
    --plyta-2: oklch(25% .014 var(--marka-barwa));
    --pole-tlo: oklch(21% .012 var(--marka-barwa));
    --pole-tlo-wylaczone: oklch(25% .014 var(--marka-barwa));
    --pole-tlo-blad: oklch(24% .04 27);
    --atrament: oklch(94% .008 var(--marka-barwa));
    --atrament-2: oklch(72% .010 var(--marka-barwa));
    --atrament-3: oklch(56% .010 var(--marka-barwa));
    --atrament-jednostka: oklch(56% .010 var(--marka-barwa));
    --kreska: oklch(30% .012 var(--marka-barwa));
    --kreska-2: oklch(38% .014 var(--marka-barwa));
    --pole-kreska: oklch(38% .014 var(--marka-barwa));
    --pole-kreska-mocna: oklch(52% .016 var(--marka-barwa));
    --marka: oklch(72% .17 var(--marka-barwa));
    --marka-mgla: oklch(28% .05 var(--marka-barwa));
    --alarm: oklch(66% .15 27);
    --alarm-mgla: oklch(26% .05 27);
    --ostrzezenie: oklch(72% .11 70);
    --ostrzezenie-mgla: oklch(27% .04 70);
    --powodzenie: oklch(68% .10 168);
    --powodzenie-mgla: oklch(26% .04 168);
    --informacja: oklch(68% .11 250);
    --informacja-mgla: oklch(26% .04 250);
    --cien-lista: 0 4px 12px oklch(10% .01 var(--marka-barwa) / .45);
    --cien-okno: 0 12px 32px oklch(10% .01 var(--marka-barwa) / .60);
  }
}
/* Ciemny WYMUSZONY przelacznikiem w profilu, niezaleznie od systemu.
   Te same tokeny co wyzej; dwa selektory, bo media query nie da sie
   polaczyc z atrybutem w jednej regule. Zmiana tokenu = zmiana w OBU. */
:root[data-motyw="ciemny"] {
    --papier: oklch(17% .010 var(--marka-barwa));
    --plyta: oklch(21% .012 var(--marka-barwa));
    --plyta-2: oklch(25% .014 var(--marka-barwa));
    --pole-tlo: oklch(21% .012 var(--marka-barwa));
    --pole-tlo-wylaczone: oklch(25% .014 var(--marka-barwa));
    --pole-tlo-blad: oklch(24% .04 27);
    --atrament: oklch(94% .008 var(--marka-barwa));
    --atrament-2: oklch(72% .010 var(--marka-barwa));
    --atrament-3: oklch(56% .010 var(--marka-barwa));
    --atrament-jednostka: oklch(56% .010 var(--marka-barwa));
    --kreska: oklch(30% .012 var(--marka-barwa));
    --kreska-2: oklch(38% .014 var(--marka-barwa));
    --pole-kreska: oklch(38% .014 var(--marka-barwa));
    --pole-kreska-mocna: oklch(52% .016 var(--marka-barwa));
    --marka: oklch(72% .17 var(--marka-barwa));
    --marka-mgla: oklch(28% .05 var(--marka-barwa));
    --alarm: oklch(66% .15 27);
    --alarm-mgla: oklch(26% .05 27);
    --ostrzezenie: oklch(72% .11 70);
    --ostrzezenie-mgla: oklch(27% .04 70);
    --powodzenie: oklch(68% .10 168);
    --powodzenie-mgla: oklch(26% .04 168);
    --informacja: oklch(68% .11 250);
    --informacja-mgla: oklch(26% .04 250);
    --cien-lista: 0 4px 12px oklch(10% .01 var(--marka-barwa) / .45);
    --cien-okno: 0 12px 32px oklch(10% .01 var(--marka-barwa) / .60);
}