/* 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 JEDNA rzecza:
 *
 * IMPORT CZCIONEK Z SIECI WYCIETY. Nasze CSP mowi font-src 'self' i style-src
 * 'self' (B-02, B-07), wiec import z Google Fonts bylby po cichu zablokowany
 * przez przegladarke, a kroje i tak by nie doszly. Do czasu samodzielnego
 * hostowania IBM Plex Sans dzialaja zapasy z systemu: --font-interfejs konczy
 * sie na system-ui. Wyciete linie, zeby dalo sie je przywrocic:
 *
 * @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;600&family=JetBrains+Mono:wght@500&family=Playfair+Display:wght@400&display=swap");
 */

/* 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: #83868f;          /* pomocniczy, podpisy */

  /* --- 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;

  /* --- 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;
  --pos: #9fd08c;
  --neg: #e08b7b;

  /* --- kroje ------------------------------------------------------------- */
  /* 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. */
  --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;

  /* --- rozmiary pisma, skala zamknieta ----------------------------------- */
  --ts-mikro: 10px;
  --ts-meta: 11px;
  --ts-bazowy: 13px;
  --ts-tytul: 15px;
  --ts-lead: 17px;
  --ts-kpi: 28px;
  --ts-display: 32px;

  /* --- 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;

  /* --- promienie, skala zamknieta ---------------------------------------- */
  --r-drobne: 3px;
  --r-plakietka: 8px;
  --r-kontrolka: 12px;
  --r-karta: 16px;
  --r-pigulka: 999px;

  /* --- wysokosci kontrolek i ich padding poziomy ------------------------- */
  --h-mikro: 28px;   --px-mikro: 14px;
  --h-kompakt: 32px; --px-kompakt: 16px;
  --h-komfort: 40px; --px-komfort: 20px;
  --h-dotyk: 44px;   --px-dotyk: 20px;
  --h-hala: 56px;    --px-hala: 24px;

  --ch: var(--h-kompakt);   /* biezaca wysokosc kontrolki, jak w Figmie */
  --cpx: var(--px-kompakt); /* biezacy padding poziomy */

  /* --- odstepy ----------------------------------------------------------- */
  --o-1: 4px;
  --o-2: 6px;
  --o-3: 8px;
  --o-4: 12px;
  --o-5: 16px;
  --o-6: 20px;
  --o-7: 24px;
  --o-8: 32px;

  /* --- 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: #9fd08c;

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

  /* --- 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 ------------------------------- */
  --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);
  --color-action-danger-bg: var(--no-tinta);
  --color-action-danger-fg: var(--neg);
  --color-action-danger-border: var(--no-obrys);
  --color-action-disabled-bg: var(--gh0);
  --color-action-disabled-fg: var(--t3);
  --color-focus-ring: var(--lm);

  --color-feedback-success-fg: var(--va);
  --color-feedback-success-bg: var(--va-plakietka);
  --color-feedback-success-border: var(--va-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(--no);
  --color-feedback-danger-bg: var(--no-tinta);
  --color-feedback-danger-border: var(--no-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(--va);
  --color-state-dirty: var(--nk);
  --color-state-invalid: var(--no);
  --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);
}

/* --- 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-interfejs);
  font-size: var(--ts-bazowy);
  line-height: var(--lh-ciagly);
  -webkit-font-smoothing: antialiased;
}

/* 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: mono, wersaliki, rozstrzelone. Jeden wzor w calej aplikacji. */
.etykieta-sekcji {
  font-family: var(--font-dane);
  font-size: var(--ts-meta);
  font-weight: 500;
  letter-spacing: var(--ls-etykieta);
  text-transform: uppercase;
  color: var(--color-fg-subtle);
}

/* Liczby zawsze mono i o stalej szerokosci cyfry, zeby kolumny nie tanczyly. */
.dane {
  font-family: var(--font-dane);
  font-weight: 500;
  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;

    --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;

    --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;
  }
}