/* KOPIA z motywu aplikacji mapujacej, pobrana 2026-08-31.
 * Zrodlo prawdy wedlug WI-01: pliki w repozytorium, Figma jest z nich
 * generowana. Ta kopia rozni sie od zrodla tym, ze KROJE SA U NAS.
 *
 * KROJE Z WLASNEGO SERWERA (R-07, UI-01, przyjete przez Radka 14.10.2026).
 * Nasze CSP mowi font-src 'self' i style-src 'self' (B-02, B-07), wiec import
 * z Google Fonts bylby po cichu zablokowany, a kroje i tak by nie doszly; do
 * 15.10.2026 rysowaly sie zapasy z systemu (SF, Georgia, Menlo, Arial).
 * Teraz szesc plikow woff2 lezy w /czcionki/ (zrodlo: serwer/publiczne/czcionki,
 * budowanie kopiuje je obok tego pliku). CSP BEZ ZMIAN: to ten sam adres.
 *   - Fontsource 5.3.0, licencja SIL OFL 1.1 (czcionki/OFL.txt);
 *   - kroje zmienne: jeden plik niesie wszystkie wagi;
 *   - zestaw lacinski i lacinski rozszerzony (polskie znaki: U+0100...),
 *     przegladarka pobiera drugi tylko, gdy na stronie stoi taki znak;
 *   - font-display: swap: tekst od razu w kroju zapasowym, bez pustki;
 *   - z wyprzedzeniem (preload w index.html) tylko IBM Plex Sans, bo niesie
 *     caly interfejs; Playfair i Mono przychodza, gdy sa potrzebne.
 * Pliki sa jawne bez sesji (karta logowania jest juz w Playfair i Plex):
 * regula katalogowa w serwer-py/src/bezpieczenstwo.py, tylko typ .woff2.
 */

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("/czcionki/ibm-plex-sans-latin-wght-normal.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: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("/czcionki/ibm-plex-sans-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("/czcionki/jetbrains-mono-latin-wght-normal.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: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("/czcionki/jetbrains-mono-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/czcionki/playfair-display-latin-wght-normal.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: "Playfair Display";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/czcionki/playfair-display-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Warstwa tokenow. Jedyne miejsce, w ktorym zyja wartosci wygladu.
 *
 * Zrodlo: Avocado Design System v02, plik Figmy 0f1PG96JUqAE3boMgI8cFP,
 * strona "04 Komponenty", kolumna TRYB CIEMNY (wezel 59:323). Pobrane 2026-08-27.
 * Kolory zgadzaja sie z avocado-design-system/tokens/primitives.color.json:
 * limonka lm to color.lime.300, czyli #D2D827.
 *
 * DWIE KONWENCJE NAZW, CELOWO. Krotkie kody (--lm, --t1, --gh) sa tym, czym
 * posluguje sie biblioteka w Figmie, wiec kod wklejony z konektora dziala bez
 * tlumaczenia. Nazwy semantyczne (--color-bg-canvas i dalej) pochodza z
 * "01 Fundament design systemu", rozdzial 4.2, i sa docelowa architektura
 * tokenow Avocado. Nazwy semantyczne sa ALIASAMI, wartosc zyje raz.
 *
 * ZASADA: zaden plik poza tym nie ma prawa zawierac wartosci koloru, promienia,
 * wysokosci kontrolki ani rozmiaru pisma. Pierwszy wyjatek kasuje wszystkie korzysci.
 *
 * Tryb jasny: kolumna TRYB JASNY istnieje w Figmie i czeka na pobranie. Do tego
 * czasu NIE ZGADUJEMY jej wartosci; brak wpisu jest uczciwszy niz wymyslony kolor.
 */


:root {
  color-scheme: dark;

  /* --- powierzchnie ------------------------------------------------------ */
  --bg: #121214;          /* kanwa aplikacji */
  --card: #1a1a1d;        /* panel, karta, tabela */
  --gh0: #1e1e21;         /* ghost 0, tlo elementu wylaczonego */
  --gh: #232327;          /* ghost 1, tlo przycisku secondary */
  --gh2: #2a2a2f;         /* ghost 2, element wyniesiony */
  --gh-hover: #27272c;

  /* --- linie i obrysy ---------------------------------------------------- */
  --line: #ffffff14;      /* podzial, 8 procent bieli */
  --bd: #ffffff2e;        /* obrys kontrolki */
  --bd-hover: #ffffff47;

  /* --- tekst ------------------------------------------------------------- */
  --t1: #e8e8ea;          /* tekst podstawowy */
  --t2: #abaeb6;          /* drugorzedny, etykiety */
  --t3: #9a9da6;          /* pomocniczy, podpisy; UX-10 (decyzja PO 12.10.2026): bylo #83868f (Figma v02), rozjasnione do kontrastu >= 4,5:1 na wszystkich tlach */

  /* --- akcent, limonka --------------------------------------------------- */
  --lm: #d2d827;
  --lm-hover: #ebf22c;    /* rozjasnienie 1.12 */
  --lm-active: #bdc223;   /* przyciemnienie 0.96 */
  --onlm: #121214;        /* tekst na wypelnieniu limonkowym */
  --lmt: #d2d8271a;       /* tinta, zaznaczenie */
  --lm-obrys: #d2d82780;
  /* WYPELNIENIE SLUPKA WYKRESU. Slupek niesie informacje, wiec obowiazuje
     go prog 3 : 1 wobec toru (--gh). Tinta --lmt daje 1,26 : 1, czyli
     slupek praktycznie niewidoczny, a przez to wykres, ktory nie reaguje
     na zatrzymanie pomiaru (KF-8). Ta wartosc to akcent 42 procent na
     tle --gh2, policzony raz i zapisany jako LICZBA: mieszanie w locie
     (color-mix) zalezy od przegladarki i cicho wraca do wartosci
     zastepczej, czyli do tej samej niewidocznosci. Zmierzone 3,12 : 1. */
  --slupek: #71732c;

  /* --- semantyka dziedzinowa Avocado ------------------------------------- */
  --va: #2fbe93;
  --va-tinta: #2fbe9329;
  --va-ring: #2fbe9373;
  --va-plakietka: #2fbe9324;
  --va-obrys: #2fbe9366;
  --nk: #e5b93e;
  --nk-tinta: #e5b93e29;
  --nk-ring: #e5b93e73;
  --nk-plakietka: #e5b93e24;
  --nk-obrys: #e5b93e66;
  --no: #e0486b;
  --no-tinta: #e0486b1f;
  --no-ring: #e0486b73;
  --no-obrys: #e0486b73;
  /* --- kolory STANOW INTERFEJSU (D-10, D-13, D-15; Radek 14-15.10.2026) -----
   * Mocne pochodne barw Lean, ale NIE barwy Lean: --va, --nk, --no zostaja
   * wylacznie dla danych Lean. Plakietka: tlo 14%, obrys 40% (Z-22). */
  --pos: #34cf9e;          /* sukces: gotowe / zapisane / komplet, 8,7:1 na karcie; bylo #9fd08c */
  --pos-tinta: #34cf9e24;  /* 14% */
  --pos-obrys: #34cf9e66;  /* 40% */
  --neg: #fb5178;          /* blad i dzialanie niebezpieczne, 5,4:1 na karcie; bylo #e08b7b */
  --neg-tinta: #fb51781a;  /* 10%: na tej tincie tekst bledu ma ok. 4,8:1 */
  --neg-plakietka: #fb517824; /* 14% */
  --neg-obrys: #fb517866;  /* 40% */
  /* Zolty podpowiedzi tagow (R-39, plakietka „JAK OSTATNIO”): wyrazista
   * pochodna NVA-K (--nk), 11,2:1 na karcie. Tylko podpowiedz, nie ostrzezenie. */
  --podpowiedz: #faca42;
  --podpowiedz-tinta: #faca4224; /* 14% */
  --podpowiedz-obrys: #faca4266; /* 40% */

  /* --- kategorie na wykresach (odbiór 06.10.2026, poprawka 4) ----------------
   * Osiem rozróżnialnych odcieni dla wartości grup tagów i typów pracy, w stałej kolejności
   * (pierwsza wartość grupy zawsze --kat-1, druga --kat-2...). Bez zieleni, bursztynu i czerwieni:
   * te trzy znaczą klasy Lean (--va, --nk, --no) i nie mogą sugerować oceny. Szary --t3 zostaje
   * wyłącznie dla „bez oznaczenia w tej grupie”. Ostateczna ocena palety: właściciel produktu. */
  --kat-1: #d2d827;   /* limonka marki */
  --kat-2: #5aaee8;   /* błękit */
  --kat-3: #a78bfa;   /* fiolet */
  --kat-4: #e57fbf;   /* róż */
  --kat-5: #f0a050;   /* pomarańcz */
  --kat-6: #c9b38a;   /* piasek */
  --kat-7: #dcdce0;   /* jasny */
  --kat-8: #6f7fd9;   /* indygo */
  /* Standard (dwie wartości): druga wartość to ciemniejszy, nasycony odcień akcentu zamiast błękitu (ODB-07-20 / D-9).
   * Osobny token, bo globalne --kat-2 zostaje (nie przemalowujemy innych grup kategorii). Jaśniejszy od --t3 („bez
   * oznaczenia”) i odróżnialny od limonki jasnością, nie tylko barwą. */
  --kat-std-2: #9ba300;

  /* --- kroje, wedlug ROL (UI-02, Z-01) ----------------------------------- */
  /* UWAGA: biblioteka w Figmie v02 uzywa IBM Plex Sans i Playfair Display,
   * a dokument "05 Kierunek wizualny" z 4 sierpnia mowi Inter Tight i Fraunces.
   * Idziemy za Figma, bo to ona jest zbudowana. Rozjazd zglaszony do repo Avocado.
   *
   * Role (UI-02, przyjete 14.10.2026):
   *   --font-ui       IBM Plex Sans: caly interfejs, takze liczby w zdaniach;
   *   --font-dane     JetBrains Mono: TYLKO wartosci stojace osobno (czas, procent,
   *                   liczba w kaflu i tabeli, identyfikator); --font-mono to alias;
   *   --font-display  Playfair Display: TYLKO tytul strony i karta logowania.
   * Pliki krojow leza w /czcionki/ (R-07, UI-01); wagi: Plex 400/500/600,
   * Playfair 400, Mono 300/400. */
  --font-interfejs: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-dane: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-display: "Playfair Display", Georgia, serif;
  --font-ui: var(--font-interfejs);
  --font-mono: var(--font-dane);   /* R-08: kod uzywal tej nazwy, a tokenu nie bylo */

  /* --- rozmiary pisma, skala ZAMKNIETA: 8 rozmiarow (UI-03, Z-03) ---------
   * 12 · 13 · 14 · 15 · 16 · 17 · 24 · 28. Innego rozmiaru nie ma. Jawne
   * wyjatki: podpisy osi wykresow 11 (--ts-os) i duze liczby KPI (D-03,
   * zostaja w odebranej wielkosci, ustawiane na ekranie wynikow). */
  --ts-12: 0.75rem;
  --ts-13: 0.8125rem;
  --ts-14: 0.875rem;
  --ts-15: 0.9375rem;
  --ts-16: 1rem;
  --ts-17: 1.0625rem;
  --ts-24: 1.5rem;
  --ts-28: 1.75rem;
  --ts-os: 0.6875rem;              /* wyjatek: tylko podpisy osi wykresow (11) */

  /* Rozmiary wedlug ROLI. Ekran mowi rola, nie liczba. Wartosci zalezne od
   * urzadzenia (dotyk, telefon) przestawia @media pod :root nizej. */
  --ts-tresc: var(--ts-14);        /* tresc: 14 komputer, 15 tablet i telefon */
  --ts-pole: var(--ts-14);         /* tekst w polu: 14 komputer, 16 dotyk (iPhone nie powieksza) */
  --ts-etykieta: var(--ts-13);     /* etykieta pola 13/400 --t2 na kazdej szerokosci (9.1, Radek 16.10; dawniej 13/600, dotyk 14) */
  --ts-etykieta-danej: var(--ts-12); /* nazwa przy danej i naglowek kolumny 12/500 --t3 wersalikami (9.1) */
  --ts-podpowiedz: var(--ts-12);   /* podpowiedz pod polem 12, dotyk 13 */
  --ts-wartosc: var(--ts-13);      /* wartosc stojaca osobno (mono): czas w wierszu, liczba w tabeli; dotyk 14 */
  --ts-przycisk: var(--ts-14);     /* przycisk 14/600, dotyk 15/600 (UI-06) */
  --ts-wstep: var(--ts-15);        /* jedno zdanie pod tytulem strony, --t2, maks. 60ch */
  --ts-nadtytul: var(--ts-12);     /* nadtytul 12/600 wersalikami +6% (Plex, nie mono) */
  --ts-pastylka: var(--ts-12);     /* pastylka i plakietka stanu 12/600 */
  --ts-podsekcja: var(--ts-15);    /* podsekcja, tytul sekcji wzoru B 15/600 */
  --ts-tytul-okna: var(--ts-16);   /* tytul okna 16/600 */
  --ts-tytul-sekcji: var(--ts-17); /* tytul sekcji w karcie, tytul panelu C 17/600 */
  --ts-tytul-strony: var(--ts-28); /* tytul strony Playfair 28, telefon 24 (UI-04) */
  --ts-menu: var(--ts-14);         /* menu boczne 14 */
  --ts-menu-dolne: var(--ts-12);   /* dolne menu telefonu 12 (bylo 10) */

  /* Dawne nazwy, przepiete na skale. --ts-mikro (10) i --ts-meta (11) sa
   * WYCOFANE (UI-03): wskazuja 12, nowy kod ich nie uzywa. */
  --ts-mikro: var(--ts-12);
  --ts-meta: var(--ts-12);
  --ts-bazowy: var(--ts-tresc);
  --ts-tytul: var(--ts-15);
  --ts-lead: var(--ts-17);
  --ts-kpi: var(--ts-28);
  --ts-display: var(--ts-tytul-strony);

  /* --- interlinie -------------------------------------------------------- */
  --lh-zbity: 1.2;
  --lh-tytul: 1.35;
  --lh-ciagly: 1.5;
  --lh-display: 1.1;

  /* --- rozstrzelenie danych, w em wobec rozmiaru ------------------------- */
  --ls-etykieta: 0.08em;   /* Dane/Etykieta 11, wersaliki */
  --ls-plakietka: 0.06em;  /* Dane/Plakietka 10 */
  --ls-kpi: -0.02em;
  --ls-display: -0.01em;
  --ls-nadtytul: 0.06em;   /* nadtytul i plakietka: Plex wersalikami +6% (UI-03, Z-22) */
  --ls-etykieta-danej: 0.04em; /* nazwa przy danej: Plex 12/500 wersalikami +4% (9.1, Radek 16.10) */

  /* --- promienie, skala zamknieta ---------------------------------------- */
  --r-drobne: 3px;
  --r-plakietka: 8px;
  --r-kontrolka: 12px;
  --r-karta: 16px;
  --r-pigulka: 999px;
  /* Kropka stanu przed slowem w plakietce (rejestr R15, 9.5): kolo 6 px w kolorze stanu. */
  --kropka-stanu: 6px;
  /* Promienie wedlug ROLI (UI-05, UI-10, Z-08, Z-10). Przyciski dzialan maja
   * jeden ksztalt; przejscie na kapsuly to zmiana JEDNEJ linii: --r-przycisk. */
  --r-przycisk: var(--r-kontrolka);   /* 12, kazdy przycisk dzialania */
  --r-pole: var(--r-kontrolka);       /* 12, pole tekstowe i lista */
  --r-komunikat: var(--r-kontrolka);  /* 12, komunikat w tresci */
  --r-okno: var(--r-karta);           /* 16, okno i karta (F-05) */
  --r-panel: 18px;                    /* 18, lewe narozniki panelu bocznego C (Z-14) */

  /* --- wysokosci kontrolek i ich padding poziomy ------------------------- */
  --h-mikro: 1.75rem;   --px-mikro: 0.875rem;
  --h-kompakt: 2rem; --px-kompakt: 1rem;
  --h-komfort: 2.5rem; --px-komfort: 1.25rem;
  --h-dotyk: 2.75rem;   --px-dotyk: 1.25rem;
  --h-hala: 56px;    --px-hala: 24px;

  /* Wysokosci wedlug ROLI (UI-06, Z-09). Komputer (od 1100 px, mysz):
   * domyslna 40, gesta 32, praca 40. Tablet i KAZDY ekran dotykowy: 44, 44, 56.
   * W jednym rzedzie zawsze jedna wysokosc. Dotyk przestawia @media nizej. */
  --ch: var(--h-komfort);        /* domyslna wysokosc przycisku i pola */
  --ch-gesta: var(--h-kompakt);  /* wiersz tabeli, pasek filtrow, kalendarz */
  --ch-praca: var(--h-komfort);  /* START, STOP, Zatwierdz */
  --ch-wiersz: 48px;             /* wiersz listy (osoba, pozycja); dotad sam zapas w kodzie */
  --cpx: var(--px-kompakt);      /* padding poziomy przycisku: 16, dotyk 20 */
  --przycisk-min: 88px;          /* najmniejsza szerokosc przycisku na komputerze */
  --dotyk-min: 44px;             /* najmniejsze pole dotyku 44 x 44, odstep 8 */

  /* --- odstepy, siatka 4: 4 / 8 / 12 / 16 / 24 / 32 / 48 (Z-12) ----------
   * --o-2 (dawniej 6) i --o-6 (20) nie leza na siatce. --o-2 jest WYCOFANE
   * i wskazuje 8; --o-6 zostaje wylacznie dla wciecia karty i przycisku
   * na tablecie (20, UI-06, UI-10). */
  --o-1: 4px;
  --o-2: 8px;
  --o-3: 8px;
  --o-4: 12px;
  --o-5: 16px;
  --o-6: 20px;
  --o-7: 24px;
  --o-8: 32px;
  --o-9: 48px;

  /* --- karty i naglowek strony (UI-04, UI-10, Z-04, Z-10) ----------------- */
  --karta-wciecie: 24px;         /* 24 komputer, 20 tablet, 16 telefon */
  --karta-odstep: 16px;          /* miedzy kartami 16, telefon 12 */
  --naglowek-odstep: 24px;       /* od belki do naglowka i od naglowka do pierwszej karty */

  /* --- szerokosci (UI-09, UI-12, Z-05, Z-14...Z-17) ----------------------- */
  --tresc-max: 1200px;           /* tresc strony, do lewej */
  --tekst-max: 60ch;             /* tekst ciagly: wstep, stan pusty, opis */
  --okno-s: 480px;               /* potwierdzenie, krotka decyzja */
  --okno-m: 640px;
  --panel-w: 600px;              /* panel boczny C; tablet min(600px, 88vw) */
  --formularz-opis: 300px;       /* wzor B: opis sekcji po lewej */
  --formularz-max: 720px;        /* wzor B: pola w siatce 12 kolumn */
  --formularz-kolumny: 12;
  --formularz-odstep: 16px;      /* miedzy polami w siatce, w pionie i w poziomie */
  --karta-logowania: 400px;      /* logowanie i odzyskiwanie, na srodku */
  --pole-xs: 96px;               /* pola poza siatka: godzina, kod */
  --pole-s: 200px;               /* data, krotka lista */
  --pole-m: 320px;               /* e-mail, login, wyszukiwarka w pasku */
  --pole-l: 480px;               /* nazwa, lista obiektow */

  /* --- liczby wspolnych klockow z zasad (Z-14, Z-18, Z-21, Z-23, Z-24, UI-07, D-12) */
  --panel-margines: 14px;        /* panel C: odstep u gory i u dolu */
  --ruch-panel: 0.26s;           /* panel C: wjazd jak „Szczegoly” osoby */
  --arkusz-h: 92%;               /* telefon: panel C jako arkusz od dolu */
  --kreator-spis: 264px;         /* kreator wzoru B: spis krokow z boku */
  --ch-opcja: 32px;              /* wiersz listy wyboru i godzin, dotyk 40 */
  --komunikat-kreska: 3px;       /* komunikat w tresci: kreska z lewej */
  --wylaczony-krycie: 0.45;      /* przycisk glowny wylaczony: przygaszona limonka, nie szary */
  --ts-filtr: var(--ts-13);      /* pigulka filtra i segmentu 13/500 */
  --ts-komunikat: var(--ts-14);  /* tekst komunikatu w tresci */
  --kalendarz-komorka: 44px;     /* kalendarz aktywnosci (D-12), telefon 40 */
  --r-komorka: 10px;             /* promien komorki kalendarza aktywnosci (D-12) */

  /* --- rysunek --------------------------------------------------------- */
  /* generator/rysuj.py NIE ZNA juz zadnej wartosci koloru: emituje var(--rys-*),
   * dzieki czemu rysunek przechodzi w tryb jasny razem z dokumentem, a na
   * papierze nie zostaje plamą czarnego tuszu. Geometria jest tu bez zmian,
   * sprawdz_rysunek.py nie patrzy na kolory. */
  --rys-tlo: var(--card);          /* plansza i podklad pod etykietami */
  --rys-blok: var(--gh);           /* zadanie, ekran, zdarzenie */
  --rys-bramka: var(--gh2);        /* romb, plakietka aktora, etykieta */
  --rys-czekanie: var(--gh0);      /* czas i czekanie */
  --rys-blad: #2a2225;             /* blok bledu */
  --rys-poza: #191a1f;             /* poza aplikacja */
  --rys-obrys: #6e7178;            /* obrys zwyklego bloku */
  --rys-akcent: var(--lm);         /* obrys rombu, aktor, numer bramki */
  --rys-linia: var(--t3);          /* przeplyw i grot */
  --rys-tekst: var(--t1);
  --rys-tekst2: var(--t2);
  --rys-tekst3: var(--t3);
  --rys-blad-obrys: var(--neg);
  --rys-wynik: var(--pos);

  /* --- szkielet ukladu, z rozdzialu 5 kierunku wizualnego ---------------- */
  --belka-h: 64px;
  --menu-w: 212px;
  --menu-w-zwiniete: 72px;
  --pozycja-menu-h: 2.375rem;

  /* --- ruch -------------------------------------------------------------- */
  --ruch-szybko: 0.1s;
  --ruch-normalnie: 0.15s;
  --ruch-wolno: 0.25s;
  --ruch-krzywa: cubic-bezier(0.2, 0, 0.2, 1);

  /* --- fokus, jeden wzor w calej aplikacji ------------------------------- */
  --ikona-kreska: 1.2;            /* grubosc kreski kazdej ikony (ikony.tsx), jeden parametr na caly produkt (O-33) */
  --fokus-obrys: 2px;
  --fokus-odsuniecie: 2px;

  /* Cien warstwy wyniesionej: okno potwierdzenia i szuflada recenzenta.
   * Jedyny cien w systemie; hierarchie buduje jasnosc tla, nie cienie. */
  --cien-okna: 0 20px 30px rgba(0, 0, 0, 0.5);
  /* Ta sama glebia, ale szuflada wchodzi z prawej krawedzi, wiec cien pada
   * w lewo. Kierunek cienia mowi, z ktorej strony element sie wysunal. */
  --cien-szuflady: -20px 0 30px rgba(0, 0, 0, 0.5);

  /* --- poswiata akcji glownej -------------------------------------------- */
  /* Regula R13 z Figmy: poswiata dziedziczy kolor stanu przycisku,
   * nigdy nie jest przypisana na sztywno do akcentu. */
  --poswiata: 0 8px 12px;
}

/* --- aliasy semantyczne, nazwy z "01 Fundament" 4.2 ----------------------
 * Do nowego kodu uzywaj TYCH nazw. Krotkie kody zostaja po to, zeby fragment
 * przeniesiony z konektora Figmy dzialal bez przepisywania.
 */
:root {
  --color-bg-canvas: var(--bg);
  --color-bg-surface: var(--card);
  --color-bg-surface-raised: var(--gh2);
  --color-bg-surface-sunken: var(--gh0);
  --color-bg-overlay: #000000a8;

  --color-fg-default: var(--t1);
  --color-fg-muted: var(--t2);
  --color-fg-subtle: var(--t3);
  --color-fg-on-accent: var(--onlm);

  --color-border-muted: var(--line);
  --color-border-default: var(--bd);
  --color-border-strong: var(--bd-hover);
  --color-border-focus: var(--lm);

  --color-action-primary-bg: var(--lm);
  --color-action-primary-hover: var(--lm-hover);
  --color-action-primary-active: var(--lm-active);
  --color-action-primary-fg: var(--onlm);
  --color-action-secondary-bg: var(--gh);
  --color-action-secondary-fg: var(--t1);
  --color-action-ghost-fg: var(--t2);
  /* Dzialanie niebezpieczne w czerwieni bledu, nie w czerwieni Lean (D-10, UI-07). */
  --color-action-danger-bg: var(--neg-tinta);
  --color-action-danger-fg: var(--neg);
  --color-action-danger-border: var(--neg-obrys);
  --color-action-disabled-bg: var(--gh0);
  --color-action-disabled-fg: var(--t3);
  --color-focus-ring: var(--lm);

  /* Sukces i blad to kolory STANOW, nie Lean (N-1, N-3, D-13, D-15): zielen
   * Lean --va dawala sukces, czerwien Lean --no (4,4:1) dawala blad. */
  --color-feedback-success-fg: var(--pos);
  --color-feedback-success-bg: var(--pos-tinta);
  --color-feedback-success-border: var(--pos-obrys);
  --color-feedback-warning-fg: var(--nk);
  --color-feedback-warning-bg: var(--nk-plakietka);
  --color-feedback-warning-border: var(--nk-obrys);
  --color-feedback-danger-fg: var(--neg);
  --color-feedback-danger-bg: var(--neg-tinta);
  --color-feedback-danger-border: var(--neg-obrys);
  /* Podpowiedz (R-39): zolty pasek nad tagami, odmiana komunikatu. */
  --color-feedback-hint-fg: var(--podpowiedz);
  --color-feedback-hint-bg: var(--podpowiedz-tinta);
  --color-feedback-hint-border: var(--podpowiedz-obrys);
  --color-feedback-info-fg: var(--t2);
  --color-feedback-info-bg: var(--gh);
  --color-feedback-info-border: var(--line);

  /* Stan danych, rodzina osobna od interakcji. U nas niesie stan notatki
   * recenzenta, w tym te dwa, ktore w Avocado nazywaja sie tak samo. */
  --color-state-saved: var(--pos);   /* D-15: „zapisane” w zieleni sukcesu */
  --color-state-dirty: var(--nk);
  --color-state-invalid: var(--neg); /* K-9: blad interfejsu w --neg, nie w Lean */
  --color-state-offline-queued: var(--t3);

  /* Akcent i semantyka UZYTE JAKO TEKST. Osobne od wypelnien, bo kolor,
   * ktory swietnie dziala jako tlo przycisku, potrafi nie miec zadnego
   * kontrastu jako litera. Na papierze te cztery sie zmieniaja. */
  --lm-tekst: var(--lm);
  --va-tekst: var(--va);
  --nk-tekst: var(--nk);
  --no-tekst: var(--no);
}

/* --- wartosci zalezne od urzadzenia (UI-03, UI-04, UI-06, UI-10) ---------
 * Tablet (768-1099) i KAZDY ekran dotykowy, takze iPad poziomo powyzej
 * 1100 px (pointer: coarse): tresc 15, pole 16, kontrolki 44, praca 56.
 * Tylko tutaj; ekran nie liczy tych wartosci sam. */
@media (max-width: 1099px), (pointer: coarse) {
  :root {
    --ts-tresc: var(--ts-15);
    --ts-pole: var(--ts-16);
    --ts-podpowiedz: var(--ts-13);
    --ts-wartosc: var(--ts-14);
    --ts-przycisk: var(--ts-15);
    --ch: var(--h-dotyk);
    --ch-gesta: var(--h-dotyk);
    --ch-praca: var(--h-hala);
    --cpx: var(--px-dotyk);
    --ch-opcja: 40px;
    --karta-wciecie: 20px;
  }
}
/* Menu tabletu 13 i lamanie tylko miedzy slowami (rozdz. 5 ZMIANY-UI). */
@media (min-width: 768px) and (max-width: 1099px) {
  :root { --ts-menu: var(--ts-13); }
}
/* Telefon: tytul strony 24, wciecie karty 16, odstep miedzy kartami 12. */
@media (max-width: 767px) {
  :root {
    --ts-tytul-strony: var(--ts-24);
    --karta-wciecie: 16px;
    --karta-odstep: 12px;
    --kalendarz-komorka: 40px;
  }
}

/* --- podstawa strony ---------------------------------------------------- */

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

body {
  margin: 0;
  background: var(--color-bg-canvas);
  color: var(--color-fg-default);
  font-family: var(--font-ui);
  font-size: var(--ts-tresc);
  line-height: var(--lh-ciagly);
  -webkit-font-smoothing: antialiased;
}

/* Kontrolki dziedzicza kroj strony. Przegladarka daje im wlasny (Arial,
 * systemowy), stad 128 przyciskow rysowanych Arialem (UI-07). Pole na dotyku
 * ma 16 px, bo przy mniejszym iPhone powieksza ekran przy fokusie (UI-03). */
button, input, select, textarea { font-family: inherit; }
input, select, textarea { font-size: var(--ts-pole); }

/* Fokus widoczny wszedzie, jednym wzorem. Rozdzial 6 kierunku wizualnego. */
:focus-visible {
  outline: var(--fokus-obrys) solid var(--color-focus-ring);
  outline-offset: var(--fokus-odsuniecie);
}

/* POLA TEKSTOWE: wskaznik ZASTEPUJE krawedz pola, nie orbituje wokol niej.
 *
 * Odsuniety pierscien ma sens tam, gdzie wlasna krawedz elementu jest czescia
 * jego tozsamosci: na przycisku, chipie, karcie. Pole tekstowe ma juz widoczna
 * granice, wiec pierscien odsuniety o 2 daje trzy linie z przerwa miedzy nimi
 * i czyta sie jako ramka wokol ramki. Na polu notatki, ktore ma 379 na 720,
 * to bylo 2200 px swiecacego obwodu i przykrywalo cala szuflade.
 *
 * Tak samo rozwiazuja to Material 3 (obrys pola grubieje do 2 w kolorze akcentu),
 * Adobe Spectrum i GOV.UK: krawedz pola sie zmienia, nic sie nie dokleja.
 *
 * Grubosc i kolor zostaja bez zmian, wiec wskaznik dalej ma 2 px i kontrast
 * 12,1 wobec karty, przy wymaganych 3 dla elementu nietekstowego (WCAG 1.4.11).
 * Zmienia sie wylacznie to, ze linia siedzi NA krawedzi pola, a nie obok niej. */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline-offset: 0;
  border-color: transparent;
}

/* Etykieta sekcji = nadtytul: Plex 12/600 wersalikami +6%, --t3. Jeden wzor
 * w calej aplikacji. Do 14.10.2026 byl mono 11; role krojow (UI-02, F-02)
 * oddaja mono wylacznie wartosciom stojacym osobno. */
.etykieta-sekcji {
  font-family: var(--font-ui);
  font-size: var(--ts-nadtytul);
  font-weight: 600;
  letter-spacing: var(--ls-nadtytul);
  text-transform: uppercase;
  color: var(--color-fg-subtle);
}

/* Wartosc stojaca osobno: mono o stalej szerokosci cyfry, zeby kolumny nie
 * tanczyly. Liczba w zdaniu NIE dostaje tej klasy (UI-02). Mono 300 i 400. */
.dane {
  font-family: var(--font-dane);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

/* Tresc wylacznie dla czytnika ekranu. Naglowek kolumny z czynnosciami musi
 * cos znaczyc dla kogos, kto nie widzi tabeli, a nie moze zabierac miejsca. */
.tylko-dla-czytnika {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ======================================================================
 * PAPIER. Przegladarka przy druku wycina tla, ale zostawia kolor tekstu,
 * wiec dokument w trybie ciemnym wychodzi jako prawie bialy tekst na bieli,
 * czyli pusta kartka. Na papier przechodzimy wiec na tryb jasny.
 *
 * Wartosci sa KANONICZNE: kolumna TRYB JASNY z pliku Figmy
 * 0f1PG96JUqAE3boMgI8cFP, wezel 59:374. Nic tu nie jest wymyslone.
 * Te same wartosci obsluza kiedys przelacznik trybu jasnego na ekranie.
 * ====================================================================== */

@media print {
  :root {
    color-scheme: light;
    --kat-1: #898d00; --kat-2: #1f6fa8; --kat-3: #6d4fc2; --kat-4: #b0408a;
    --kat-5: #b86414; --kat-6: #8a7444; --kat-7: #4a4a52; --kat-8: #3647a8;
    --kat-std-2: #5c6000;

    --bg: #fafaf8;
    --card: #ffffff;
    --gh0: #f5f5f2;
    --gh: #f0f0ec;
    --gh2: #e7e7e2;
    --gh-hover: #ffffff;

    --line: #0a0a0b14;
    --bd: #0a0a0b38;
    --bd-hover: #0a0a0b57;

    --t1: #121214;
    --t2: #565962;
    --t3: #6e7178;

    --lmt: #898d001f;
    --lm-obrys: #898d00;
    --slupek: #898d00;

    --va-ring: #1f85668c;
    --va-obrys: #1f856680;
    --nk-tinta: #e5b93e2e;
    --nk-ring: #8a6b008c;
    --nk-obrys: #8a6b0080;
    --no-tinta: #e0486b1a;
    --no-ring: #a836508c;
    --pos: #1f8566;
    --neg: #a83650;

    /* Rysunek przechodzi na jasny razem z dokumentem. Tla blokow, obrysy
     * i linie sa przemapowane, nie tylko tekst: blok bez tla i obrysu
     * przestaje byc blokiem. Obrysy trzymaja prog 3:1 z WCAG 1.4.11
     * dla elementow graficznych. */
    --rys-blad: #e0486b1a;
    --rys-poza: #f5f5f2;
    /* Obrys bloku w tonie linii przeplywu, nie w tokenie obrysu kontrolki:
     * najmocniejszy kanoniczny --bd-hover daje na bieli 2,28, a WCAG 1.4.11
     * wymaga 3:1 dla elementu graficznego. Ten ton daje 4,68. */
    --rys-obrys: #6e7178;
    --rys-akcent: #898d00;
    --rys-linia: #6e7178;
    /* Ton pomocniczy rysunku schodzi na papierze o stopien nizej: podpis
     * POZA APLIKACJA jest pismem 8,5 px, a na wlasnym jasnym tle mial 4,47
     * przy wymaganych 4,5. Ta sama zmiana pogrubia obrys bloku poza aplikacja
     * i sciezki, co na kartce dziala na korzysc. */
    --rys-tekst3: #565962;
    --rys-blad-obrys: #a83650;
    --rys-wynik: #1f8566;

    /* Limonka nie niesie tekstu na papierze: na bieli ma 1,48 kontrastu.
     * Kanon mowi wprost, ze na jasnym tle jest wylacznie wypelnieniem
     * z ciemnym napisem. Na kartce akcent jest wiec zwyklym tekstem. */
    --lm-tekst: var(--t1);
    --va-tekst: #1f8566;
    --nk-tekst: #8a6b00;
    --no-tekst: #a83650;
  }
}