/* ============================================================================
   tokeny.css — tokeny panelu Gońca (ARCH §18.5 UI-1…UI-20; GEIST-1 po ocenie wizualnej 4, 01.10.2026).
   Kierunek Tomka: Vercel / Geist i minimalizm — „czysto, przejrzyście, bez zbyt dużej ilości tekstu, bez przytłaczania”
   (Vercel = MAŁO, nie SZARO). Czerń i biel, JEDEN szary dla informacji, linie 1 px, odstęp zamiast ramki, Geist Sans do wszystkiego
   (także liczb, tabular-nums), Geist Mono tylko do identyfikatorów. Nazwy po polsku według roli, nie koloru:
     --tekst     jedyny kolor tekstu (#171717 / #ededed; ⛔ #000 i #fff na tekście); --tekst-mocny = alias (stare ekrany)
     --olow      jedyny szary dla informacji (drugi poziom; ≤ 40 % słów — bramka scripts/czytelnosc.mjs); --olow-2 = alias
     --mute      placeholder, oś wykresu, wyłączone, zera
     --akcja*    niebieski Vercela = „czeka na Ciebie”, link, fokus (UI-2) — tylko tekst, kropka, obrys; tło neutralne
     --zrobione  JEDYNA zieleń w panelu — wolno jej użyć wyłącznie w regułach z „zrobione” w selektorze (UI-4, lint-ui)
     --blad      błąd techniczny: WYŁĄCZNIE tekst i kropka — ⛔ tło, ramka, przycisk (UI-1, lint-ui)
     --ai        „tu pracuje AI”
   Pismo: wyłącznie tokeny --t-* (font) i --ts-* (font-size) — 7 rozmiarów (32/24/20/16/14/13/12), 3 grubości (400/500/600); lint UI-19.
   Odstępy --o1…--o7 = 4/8/12/16/24/32/48; sekcje co 32 px (telefon 24), szerokość treści 1200 px; wiersz 48 px, przycisk i pole 32 px
   (dotyk 36). Cień tylko w warstwach nad stroną (.zr-pop, .okno, .szuflada) — karta bez cienia (UI-18).
   ⛔ ochra, pomarańcz, brąz — w całym www/ (UI-2). ⛔ gradienty (UI-6). Promienie tylko 8/6/4 z tokenów (UI-5).
   Motyw: domyślnie systemowy (prefers-color-scheme), wymuszenie html[data-theme="light"|"dark"] (ui/motyw.js, localStorage).
   Blok ciemny występuje dwa razy (media systemowe i wymuszenie) — zmiana jednego = zmiana drugiego (lint-ui MOTYW porównuje).
   ============================================================================ */

:root {
    color-scheme: light;
    /* powierzchnie: strona i menu (--tlo), lista/tabela/okno/szuflada (--karta), hover i tło znacznika (--arkusz), aktywne menu i tor paska (--pasmo) */
    --tlo: #fafafa; --karta: #ffffff; --arkusz: #f2f2f2; --pasmo: #ebebeb; --hover: rgba(0, 0, 0, .04);
    /* tekst: jeden kolor, jeden szary, wyciszony */
    --tekst: #171717; --olow: #666666; --mute: #8f8f8f;
    /* „po terminie” — jedyny odwrócony znacznik: w jasnym czarny blok, w ciemnym jasny blok #ededed z ciemnym tekstem (odwrotność, GEIST-4 — decyzja integratora 01.10) */
    --po-tlo: #171717; --po-tekst: #ffffff;
    /* linie: ramka listy · między wierszami · pole i przycisk drugorzędny */
    --linia: #ebebeb; --linia-miekka: #f2f2f2; --linia-pole: #e0e0e0;
    /* akcja = „czeka na Ciebie”, link, fokus */
    --akcja: #0070f3; --akcja-tekst: #0068d6; --akcja-tlo: rgba(0, 112, 243, .1); --akcja-linia: rgba(0, 112, 243, .35);
    /* zrobione — jedyna zieleń */
    --zrobione: #17803a;
    /* AI pracuje */
    --ai: #6a5cff;
    /* błąd techniczny — tylko tekst i kropka */
    --blad: #d93036;
    /* drobne akcenty ikon (bez wypełnień) */
    --ik-fiolet: #8e4ec6; --ik-turkus: #0e8a7d; --ik-indygo: #5b58e0;
    /* głębia: karta płaska, cień tylko w warstwach nad stroną */
    --cien-karta: none;
    --cien-arkusz: 0 1px 0 rgba(0, 0, 0, .04), 0 12px 32px -12px rgba(0, 0, 0, .22);
    --scrim: rgba(15, 17, 22, .4);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --tlo: #000000; --karta: #0a0a0a; --arkusz: #111111; --pasmo: #1f1f1f; --hover: rgba(255, 255, 255, .06);
        --tekst: #ededed; --olow: #a1a1a1; --mute: #707070;
        --po-tlo: #ededed; --po-tekst: #0a0a0a;
        --linia: #2e2e2e; --linia-miekka: #1f1f1f; --linia-pole: #3d3d3d;
        --akcja: #0070f3; --akcja-tekst: #52a8ff; --akcja-tlo: rgba(0, 112, 243, .14); --akcja-linia: rgba(0, 112, 243, .45);
        --zrobione: #5dd39e;
        --ai: #9a93ff;
        --blad: #e5484d;
        --ik-fiolet: #bf7af0; --ik-turkus: #0ac7b4; --ik-indygo: #9d9bff;
        --cien-karta: none;
        --cien-arkusz: 0 0 0 1px rgba(255, 255, 255, .04), 0 18px 40px -18px rgba(0, 0, 0, .9);
        --scrim: rgba(0, 0, 0, .62);
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --tlo: #000000; --karta: #0a0a0a; --arkusz: #111111; --pasmo: #1f1f1f; --hover: rgba(255, 255, 255, .06);
    --tekst: #ededed; --olow: #a1a1a1; --mute: #707070;
    --po-tlo: #ededed; --po-tekst: #0a0a0a;
    --linia: #2e2e2e; --linia-miekka: #1f1f1f; --linia-pole: #3d3d3d;
    --akcja: #0070f3; --akcja-tekst: #52a8ff; --akcja-tlo: rgba(0, 112, 243, .14); --akcja-linia: rgba(0, 112, 243, .45);
    --zrobione: #5dd39e;
    --ai: #9a93ff;
    --blad: #e5484d;
    --ik-fiolet: #bf7af0; --ik-turkus: #0ac7b4; --ik-indygo: #9d9bff;
    --cien-karta: none;
    --cien-arkusz: 0 0 0 1px rgba(255, 255, 255, .04), 0 18px 40px -18px rgba(0, 0, 0, .9);
    --scrim: rgba(0, 0, 0, .62);
}

/* Tokeny bez motywu (te same w jasnym i ciemnym): aliasy starych nazw, geometria, rytm, pismo. */
:root {
    /* aliasy (GEIST-1): stare ekrany dziedziczą nowe kolory bez przebudowy — etap 2 usuwa nazwy z ekranów */
    --tekst-mocny: var(--tekst); --olow-2: var(--olow); --linia-2: var(--linia-pole);
    /* geometria */
    --r-karta: 8px; --r-pole: 6px; --r-chip: 4px;
    --menu-w: 240px; --gora-h: 56px; --szuflada-w: 560px; --tresc-max: 1200px;
    --wiersz-h: 48px; --dotyk: 32px;
    /* rytm: 4 / 8 / 12 / 16 / 24 / 32 / 48 — sekcje co --o6 (telefon --o5), wnętrze --o3…--o4 */
    --o1: 4px; --o2: 8px; --o3: 12px; --o4: 16px; --o5: 24px; --o6: 32px; --o7: 48px;
    --o-sekcja: var(--o6); --o-strona: var(--o6);
    /* kroje: Sans do wszystkiego (liczby tabular-nums), Mono tylko identyfikatory (adres, domena, NIP, telefon, kod) */
    --font: 'Geist', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    /* rozmiary (font-size): 7 stopni */
    --ts-xl: 32px; --ts-l: 24px; --ts-h1: 20px; --ts-h2: 16px; --ts-tekst: 14px; --ts-maly: 13px; --ts-et: 12px;
    /* pismo (font): rola → grubość / rozmiar / interlinia */
    --t-liczba-xl: 600 32px/40px var(--font);    /* liczby-filtry, KPI */
    --t-liczba: 600 24px/32px var(--font);       /* liczby w sekcji */
    --t-h1: 600 20px/28px var(--font);           /* nagłówek ekranu */
    --t-h2: 600 16px/24px var(--font);           /* sekcja, tytuł szuflady i okna */
    --t-h3: 600 14px/20px var(--font);           /* tytuł wiersza, podsekcja */
    --t-tekst: 400 14px/20px var(--font);        /* treść, komórka, menu */
    --t-maly: 400 13px/18px var(--font);         /* druga linia, meta */
    --t-etykieta: 500 12px/16px var(--font);     /* nagłówek kolumny, etykieta, znacznik — zwykłe litery */
    --t-kod: 400 13px/20px var(--mono);          /* identyfikatory */
    --ease: cubic-bezier(.4, 0, .2, 1);
}

/* Jeden warunek dotyku w całym panelu (UI-11): telefon i ekran dotykowy = cel ≥ 36 px; sekcje co 24 px, margines 16 px. */
@media (pointer: coarse), (max-width: 720px) {
    :root { --dotyk: 36px; }
}
@media (max-width: 720px) {
    :root { --o-sekcja: var(--o5); --o-strona: var(--o4); --wiersz-h: 56px; }
}