/* =====================================================================
 * tokens.css — jedyne źródło prawdy o wartościach wizualnych panelu.
 *
 * Zasada: w base.css i components.css NIE MA surowych wartości kolorów,
 * odstępów ani rozmiarów pisma. Wszystko wchodzi stąd przez zmienną.
 * Powód nie jest estetyczny: panel ma dwa motywy, a wartość zapisana
 * na sztywno w komponencie działa w jednym z nich i psuje się w drugim.
 * Jeżeli piszesz `#fff` albo `12px` poza tym plikiem — to jest błąd.
 *
 * Kontrast: KAŻDA para tekst/tło użyta w komponentach jest policzona
 * i spełnia WCAG 2.1 AA (4.5:1 dla tekstu, 3:1 dla granic kontrolek
 * i elementów nietekstowych). Wyliczenia NIE są deklaracją w dokumencie:
 * liczy je `panel/tests/test-kontrast.php` wprost z TEGO pliku, dla obu
 * motywów, i przewraca się przy zejściu poniżej progu. Zestawienie do
 * czytania: panel/docs/UI-SYSTEM.md §2.2.
 *
 * DWA MECHANIZMY, KTÓRE PRZEZ DŁUGI CZAS OMIJAŁY TĘ KONTROLĘ (i dlatego
 * test liczy je jawnie): (1) `opacity` nałożone na tekst — kompozyt liczy
 * się wobec tła RODZICA, więc para tokenów wygląda w tabeli poprawnie,
 * a na ekranie oblewa; (2) tło hoveru wiersza (`--c-surface-3` oraz
 * nakładka `rgb(0 0 0 / 4%)` na wierszu kolorowym) — czyli tło, którego
 * w tabeli par w ogóle nie było. Dokładanie `opacity` do elementu
 * niosącego tekst wymaga dopisania kompozytu do listy par w teście.
 * ===================================================================== */

:root {
  /* -------------------------------------------------------------------
   * ODSTĘPY — skala 4 px. Panel jest gęsty informacyjnie, więc skala
   * zaczyna się nisko i rośnie wolno. Nie dodawaj wartości pośrednich;
   * jeżeli czegoś brakuje, prawie zawsze znaczy to, że komponent ma
   * zły odstęp, a nie że skala jest za uboga.
   * ----------------------------------------------------------------- */
  --sp-0: 0;
  --sp-1: 0.25rem;   /*  4 px — odstęp wewnątrz pigułki, ikona↔tekst */
  --sp-2: 0.5rem;    /*  8 px — odstęp między powiązanymi elementami */
  --sp-3: 0.75rem;   /* 12 px — padding komórki tabeli */
  --sp-4: 1rem;      /* 16 px — padding karty, odstęp między polami */
  --sp-5: 1.5rem;    /* 24 px — odstęp między sekcjami karty */
  --sp-6: 2rem;      /* 32 px — odstęp między blokami ekranu */
  --sp-7: 3rem;      /* 48 px — margines stanu pustego */
  --sp-8: 4rem;      /* 64 px */

  /* -------------------------------------------------------------------
   * TYPOGRAFIA
   * Krój systemowy — panel działa w sieci wewnętrznej, bez CDN,
   * a lokalne pliki fontów to waga i kolejny artefakt do wdrożenia.
   * Krój systemowy renderuje się natychmiast i jest dobrze zhintowany
   * w rozmiarach 12–14 px, w których ten panel głównie żyje.
   * ----------------------------------------------------------------- */
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  /* Monospace do danych technicznych: URL, identyfikatory, odciski
     sekretów, liczby w tabelach. Wyrównanie w pionie jest tu ważniejsze
     od urody. */
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  /* Skala: 12 / 13 / 14 / 15 / 18 / 22 / 28 px przy korzeniu 16 px.
     Baza interfejsu to 14 px (--fs-md) — kompromis między gęstością
     a czytelnością przy kilkugodzinnej sesji. */
  --fs-xs: 0.75rem;      /* 12 px — etykiety pigułek, podpisy pomocnicze */
  --fs-sm: 0.8125rem;    /* 13 px — tabele, metadane */
  --fs-md: 0.875rem;     /* 14 px — BAZA interfejsu */
  --fs-base: 0.9375rem;  /* 15 px — treść czytana dłużej */
  --fs-lg: 1.125rem;     /* 18 px — nagłówek karty */
  --fs-xl: 1.375rem;     /* 22 px — h1 ekranu */
  --fs-2xl: 1.75rem;     /* 28 px — duża liczba w karcie statystyki */

  --lh-tight: 1.25;   /* nagłówki, liczby */
  --lh-normal: 1.45;  /* interfejs */
  --lh-relaxed: 1.6;  /* akapity opisowe, pomoc kontekstowa */

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* Skrót do liczb w tabelach: cyfry o stałej szerokości ustawiają się
     w kolumnie, więc porównanie wartości wzrokiem faktycznie działa. */
  --num: tabular-nums;

  /* -------------------------------------------------------------------
   * PROMIENIE — panel narzędziowy, więc oszczędnie. Zaokrąglenie ma
   * odróżniać warstwy, a nie ozdabiać.
   * ----------------------------------------------------------------- */
  --r-sm: 3px;    /* pola formularza, przyciski */
  --r-md: 5px;    /* karty, panele */
  --r-lg: 8px;    /* modal, popover */
  --r-full: 999px; /* pigułki, kropki stanu */

  /* -------------------------------------------------------------------
   * CIENIE — wyłącznie do oznaczenia warstwy unoszącej się nad treścią
   * (modal, toast, menu). Karty NIE mają cienia; oddziela je obramowanie.
   * Cień jako dekoracja robi z gęstego panelu papkę.
   * ----------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(9, 12, 17, 0.06);
  --shadow-md: 0 2px 8px rgba(9, 12, 17, 0.10), 0 1px 2px rgba(9, 12, 17, 0.06);
  --shadow-lg: 0 8px 28px rgba(9, 12, 17, 0.18), 0 2px 6px rgba(9, 12, 17, 0.08);

  /* -------------------------------------------------------------------
   * WYMIARY UKŁADU
   * ----------------------------------------------------------------- */
  --nav-w: 232px;          /* szerokość nawigacji bocznej */
  --nav-w-collapsed: 56px; /* zwinięta — same ikony */
  --topbar-h: 48px;        /* pasek górny na wąskim ekranie */
  --content-max: 1440px;   /* dalej tabele robią się nieczytelne */
  --tap: 32px;             /* minimalna wysokość celu kliknięcia (biurko) */

  /* -------------------------------------------------------------------
   * RUCH — przejścia tylko tam, gdzie komunikują zmianę stanu.
   * Bez animacji wejścia, bez „efektów".
   * ----------------------------------------------------------------- */
  --t-fast: 90ms;
  --t-med: 160ms;
  --ease: cubic-bezier(0.2, 0, 0.2, 1);

  --z-sticky: 10;
  --z-nav: 40;
  --z-modal: 100;
  --z-toast: 200;
}

/* =====================================================================
 * MOTYW JASNY (domyślny)
 *
 * Kolory semantyczne mają DWIE wartości: `-fg` (tekst/ikona, spełnia 4.5:1
 * na wszystkich tłach panelu) i `-bg` (delikatne tło pigułki/banera).
 * To rozdzielenie jest konieczne — kolor czytelny jako tekst jest za ciemny
 * na tło, a kolor dobry na tło nie nadaje się na tekst.
 * ===================================================================== */
:root,
:root[data-theme="light"] {
  color-scheme: light;

  /* Powierzchnie — od najdalszej do najbliższej czytelnikowi */
  --c-bg: #f5f6f8;        /* tło strony */
  --c-surface: #ffffff;   /* karta, wiersz tabeli, modal */
  --c-surface-2: #eef0f4; /* nagłówek tabeli, pole wejściowe, wgłębienie */
  --c-surface-3: #e4e7ed; /* hover wiersza, tor paska postępu */

  /* Tekst */
  --c-text: #14171c;      /* 17.96:1 na karcie */
  --c-muted: #565e6b;     /*  6.54:1 na karcie — metadane, opisy */
  /* NAJSŁABSZY DOPUSZCZALNY tekst — i to słowo „dopuszczalny" musi być
     prawdziwe na KAŻDYM tle panelu, nie tylko na karcie. Poprzednia wartość
     (#666e7a) trzymała 5,15:1 na karcie, ale schodziła do 4,16:1 na
     --c-surface-3 (nagłówek dnia w logach, hover wiersza, licznik zakładki)
     i do 4,39:1 na --c-bad-bg — czyli oblewała AA dokładnie tam, gdzie
     najsłabszy tekst realnie ląduje. Objawem był defekt O-2 z UI-STAN.md.
     Wartość niżej jest MINIMALNĄ, która przechodzi na najciemniejszym tle
     motywu jasnego (--c-surface-3, 4,61:1). Nie rozjaśniaj jej. */
  --c-faint: #5f6773;     /*  5.72:1 na karcie · 4.61:1 na --c-surface-3 */

  /* Obramowania.
     --c-border to separator dekoracyjny (WCAG 1.4.11 go nie obejmuje).
     --c-border-strong to GRANICA KONTROLKI (pole, przycisk, checkbox)
     i musi trzymać 3:1 — dlatego jest wyraźnie ciemniejsza, niż podpowiada
     wyczucie estetyczne. Nie rozjaśniaj jej „bo za mocna".
     Poprzednia wartość (#7e8693) była dobrana pod trzy powierzchnie i miała
     zapas 3,22:1 na „najjaśniejszym tle kontrolki" — tyle że wnętrzem
     kontrolki bywa też --c-surface-3 (`.btn:active`, `.logi-chip:hover`),
     gdzie schodziła do 2,96:1. Ten sam błąd doboru, co przy --c-faint:
     policzona była powierzchnia, o której się pamiętało. */
  --c-border: #dce0e6;
  --c-border-strong: #79818e;  /* 3.93 na karcie · 3.17 na --c-surface-3 */

  /* Akcent — działanie główne, zaznaczenie, pierścień focusu */
  --c-accent: #1657b8;
  --c-accent-hover: #124a9e;
  --c-accent-fg: #ffffff;
  --c-accent-soft: #e7eefb;

  /* Semantyka stanu. Nazwy pochodzą z domeny panelu, nie z palety:
     ok = działa, warn = wymaga uwagi, bad = awaria,
     unknown = nie wiemy (brak kontaktu ze stroną — to NIE jest to samo
     co awaria i musi wyglądać inaczej), info = komunikat neutralny. */
  /* Tekst NA pełnym wypełnieniu semantycznym (licznik w nawigacji, przycisk
     potwierdzający w modalu). MUSI być osobnym tokenem per motyw: biel jest
     czytelna na ciemnej czerwieni motywu jasnego (6,56:1), ale na jasnej
     czerwieni motywu ciemnego daje 2,54:1 — grubo poniżej progu. */
  --c-on-bad: #ffffff;
  --c-on-warn: #ffffff;
  --c-bad-strong: #96201a;  /* hover przycisku niebezpiecznego */
  --c-nav-focus: #ffffff;   /* pierścień focusu na ciemnej nawigacji */

  --c-ok-fg: #0f7040;      --c-ok-bg: #e6f4ec;      --c-ok-border: #b6dcc6;
  --c-warn-fg: #8a5300;    --c-warn-bg: #fbf0dc;    --c-warn-border: #e8cf9e;
  --c-bad-fg: #b3251d;     --c-bad-bg: #fbe9e7;     --c-bad-border: #f0c0bb;
  --c-unknown-fg: #565e6b; --c-unknown-bg: #eef0f4; --c-unknown-border: #d3d9e1;
  --c-info-fg: #1657b8;    --c-info-bg: #e7eefb;    --c-info-border: #bed2f0;

  /* METADANA — etykieta, która NIE jest oceną: platforma („Shoper"),
     przełącznik funkcji („AI wyłączone"), wersja, licznik sztuk.
     Ma własne tokeny, bo do 1.72.0 ich nie miała: wariant `neutralna`
     pożyczał `--c-muted` na `--c-surface-2`, czyli DOKŁADNIE te same dwie
     wartości, co semantyczny `unknown` (#565e6b na #eef0f4 w jasnym,
     #a3adbb na #1d222b w ciemnym). Reguła systemu — „semantyka dla stanu,
     neutralna dla metadanych" — była więc zapisana w dokumentacji, ale nie
     docierała do ekranu: „Shoper" i poziom „brak danych" renderowały się
     identycznie co do bajtu.
     Odróżnienie nie może opierać się na samym wypełnieniu ani na kropce:
     wypełnienie `--c-unknown-bg` ma na białej karcie 1,14:1 (praktycznie
     nie istnieje), a kropkę poziomy semantyczne i tak często gaszą przez
     `bez_kropki`. Dlatego neutralna różni się TRZEMA rzeczami naraz —
     kształtem (prostokąt zamiast pigułki), brakiem wypełnienia i konturem
     mocniejszym niż `--c-border` (który bez wypełnienia znika: 1,33:1). */
  --c-neutral-fg: #565e6b;      /* == --c-muted; 6,54:1 na karcie, 5,28:1 na hoverze wiersza */
  --c-neutral-bg: transparent;  /* brak wypełnienia — wypełnienie zarezerwowane dla POZIOMU */
  --c-neutral-border: #b0b9c5;  /* 1,98:1 na karcie — kontur ma być widoczny, nie krzyczeć */

  /* Nawigacja — celowo ciemniejsza od treści. Daje stały punkt
     odniesienia na brzegu ekranu i oddziela „gdzie jestem" od „co widzę". */
  --c-nav-bg: #1a1f27;
  --c-nav-fg: #c8cfda;
  --c-nav-fg-active: #ffffff;
  --c-nav-active-bg: #2b333f;
  --c-nav-border: #2b333f;
  --c-nav-muted: #8b95a4;

  --c-overlay: rgba(20, 23, 28, 0.45); /* przyciemnienie pod modalem */
  --c-focus: var(--c-accent);
}

/* =====================================================================
 * MOTYW CIEMNY
 *
 * Nie jest to odwrócenie jasnego. Powierzchnie rozjaśniają się wraz
 * z bliskością do czytelnika (bg → surface → surface-2), bo w ciemnym
 * motywie to jasność, a nie cień, buduje wrażenie warstwy.
 * Kolory semantyczne są jaśniejsze i mniej nasycone — nasycony czerwony
 * na ciemnym tle wibruje i męczy przy dłuższym patrzeniu.
 * ===================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --c-bg: #0e1116;
    --c-surface: #161a21;
    --c-surface-2: #1d222b;
    --c-surface-3: #262d38;

    --c-text: #e7eaef;
    --c-muted: #a3adbb;
    /* Patrz komentarz w motywie jasnym. Tu granicznym tłem jest również
       --c-surface-3 (#262d38): #8590a0 dawało tam 4,29:1. */
    --c-faint: #8e99a9;   /* 6.05:1 na karcie · 4.81:1 na --c-surface-3 */

    --c-border: #2a313c;
    --c-border-strong: #717a89;  /* 4.03 na karcie · 3.20 na --c-surface-3 */

    --c-accent: #79aefd;
    --c-accent-hover: #9cc4ff;
    --c-accent-fg: #0e1116;
    --c-accent-soft: #152238;

    /* Patrz komentarz w motywie jasnym — tu tekst na wypełnieniu jest CIEMNY. */
    --c-on-bad: #2e1a19;
    --c-on-warn: #2b2214;
    --c-bad-strong: #fa9c93;
    --c-nav-focus: #ffffff;

    --c-ok-fg: #4cc98a;      --c-ok-bg: #12291f;      --c-ok-border: #26543d;
    --c-warn-fg: #e0a63a;    --c-warn-bg: #2b2214;    --c-warn-border: #574227;
    --c-bad-fg: #f87f74;     --c-bad-bg: #2e1a19;     --c-bad-border: #5d3330;
    --c-unknown-fg: #a3adbb; --c-unknown-bg: #1d222b; --c-unknown-border: #39424f;
    --c-info-fg: #79aefd;    --c-info-bg: #152238;    --c-info-border: #2d4570;

    /* Patrz komentarz w motywie jasnym. */
    --c-neutral-fg: #a3adbb;      /* 7,69:1 na karcie, 6,11:1 na hoverze wiersza */
    --c-neutral-bg: transparent;
    --c-neutral-border: #4d5765;  /* 2,38:1 na karcie */

    /* W ciemnym motywie nawigacja jest CIEMNIEJSZA od treści — odwrotnie
       niż w jasnym, ale cel ten sam: ma być wyraźnie inną płaszczyzną. */
    --c-nav-bg: #0a0d11;
    --c-nav-fg: #a9b3c1;
    --c-nav-fg-active: #ffffff;
    --c-nav-active-bg: #1d232c;
    --c-nav-border: #1d232c;
    --c-nav-muted: #7b8593;

    --c-overlay: rgba(0, 0, 0, 0.62);

    /* Cienie na ciemnym tle muszą być mocniejsze, bo różnica jasności
       między warstwami jest mniejsza niż w motywie jasnym. */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4);
  }
}

/* ---------------------------------------------------------------------
 * RĘCZNY PRZEŁĄCZNIK — `<html data-theme="dark">`.
 *
 * Ta reguła musi WYGRAĆ z blokiem @media powyżej w obie strony:
 * data-theme="dark" na maszynie ustawionej na jasny motyw i data-theme="light"
 * na maszynie ustawionej na ciemny. Dlatego ciemny motyw jest zapisany
 * dwa razy (raz w @media dla `auto`, raz tutaj dla wyboru ręcznego),
 * a blok @media jest ograniczony selektorem `:not([data-theme="light"])`.
 * Duplikacja jest świadoma — alternatywa (jeden blok + nadpisania) daje
 * przypadki, w których wybór ręczny nie działa.
 * ------------------------------------------------------------------- */
:root[data-theme="dark"] {
  color-scheme: dark;

  --c-bg: #0e1116;
  --c-surface: #161a21;
  --c-surface-2: #1d222b;
  --c-surface-3: #262d38;

  --c-text: #e7eaef;
  --c-muted: #a3adbb;
  /* Patrz komentarz w motywie jasnym. */
  --c-faint: #8e99a9;   /* 6.05:1 na karcie · 4.81:1 na --c-surface-3 */

  --c-border: #2a313c;
  --c-border-strong: #717a89;  /* 4.03 na karcie · 3.20 na --c-surface-3 */

  --c-accent: #79aefd;
  --c-accent-hover: #9cc4ff;
  --c-accent-fg: #0e1116;
  --c-accent-soft: #152238;

  /* Patrz komentarz w motywie jasnym — tu tekst na wypełnieniu jest CIEMNY. */
  --c-on-bad: #2e1a19;
  --c-on-warn: #2b2214;
  --c-bad-strong: #fa9c93;
  --c-nav-focus: #ffffff;

  --c-ok-fg: #4cc98a;      --c-ok-bg: #12291f;      --c-ok-border: #26543d;
  --c-warn-fg: #e0a63a;    --c-warn-bg: #2b2214;    --c-warn-border: #574227;
  --c-bad-fg: #f87f74;     --c-bad-bg: #2e1a19;     --c-bad-border: #5d3330;
  --c-unknown-fg: #a3adbb; --c-unknown-bg: #1d222b; --c-unknown-border: #39424f;
  --c-info-fg: #79aefd;    --c-info-bg: #152238;    --c-info-border: #2d4570;

  /* Patrz komentarz w motywie jasnym. */
  --c-neutral-fg: #a3adbb;
  --c-neutral-bg: transparent;
  --c-neutral-border: #4d5765;

  --c-nav-bg: #0a0d11;
  --c-nav-fg: #a9b3c1;
  --c-nav-fg-active: #ffffff;
  --c-nav-active-bg: #1d232c;
  --c-nav-border: #1d232c;
  --c-nav-muted: #7b8593;

  --c-overlay: rgba(0, 0, 0, 0.62);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4);
}