/* ============================================================================
   tokeny.css — tokeny panelu Tropu (ARCHITEKTURA §10.2; port 1:1 tokenów Geist z panelu Gońca, GEIST-1 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 (adres, domena, polecenie). Nazwy według roli, nie koloru:
     --tekst     jedyny kolor tekstu (#171717 / #ededed; ⛔ #000 i #fff na tekście)
     --olow      jedyny szary dla informacji (drugi poziom)
     --mute      placeholder, oś wykresu, wyłączone, zera
     --akcja*    niebieski = „czeka na Ciebie”, link, fokus — tylko tekst, kropka, obrys; tło neutralne
     --zrobione  JEDYNA zieleń — wolno jej użyć wyłącznie w regułach z „zrobione” w selektorze (lint-ui UI-4)
     --blad      błąd techniczny: WYŁĄCZNIE tekst i kropka — ⛔ tło, ramka, przycisk (lint-ui UI-1)
     --ai        „tu pracuje maszyna / 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).
   Odstępy --o1…--o7 = 4/8/12/16/24/32/48; wiersz 48 px, przycisk i pole 32 px (dotyk 36). Cień tylko w warstwach nad stroną.
   ⛔ ochra, pomarańcz, brąz (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 tr_motyw).
   Blok ciemny występuje dwa razy (media systemowe i wymuszenie) — zmiana jednego = zmiana drugiego (lint-ui MOTYW porównuje).
   ============================================================================ */

:root {
    color-scheme: light;
    --tlo: #fafafa; --karta: #ffffff; --arkusz: #f2f2f2; --pasmo: #ebebeb; --hover: rgba(0, 0, 0, .04);
    --tekst: #171717; --olow: #666666; --mute: #8f8f8f;
    --po-tlo: #171717; --po-tekst: #ffffff;
    --linia: #ebebeb; --linia-miekka: #f2f2f2; --linia-pole: #e0e0e0;
    --akcja: #0070f3; --akcja-tekst: #0068d6; --akcja-tlo: rgba(0, 112, 243, .1); --akcja-linia: rgba(0, 112, 243, .35);
    --zrobione: #17803a;
    --ai: #6a5cff;
    --blad: #d93036;
    --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;
        --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;
    --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): geometria, rytm, pismo. */
:root {
    --r-karta: 8px; --r-pole: 6px; --r-chip: 4px;
    --menu-w: 232px; --gora-h: 56px; --szuflada-w: 600px; --tresc-max: 1200px;
    --wiersz-h: 48px; --dotyk: 32px;
    --o1: 4px; --o2: 8px; --o3: 12px; --o4: 16px; --o5: 24px; --o6: 32px; --o7: 48px;
    --o-sekcja: var(--o6); --o-strona: var(--o6);
    --font: 'Geist', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --ts-xl: 32px; --ts-l: 24px; --ts-h1: 20px; --ts-h2: 16px; --ts-tekst: 14px; --ts-maly: 13px; --ts-et: 12px;
    --t-liczba-xl: 600 32px/40px var(--font);    /* pierwsza liczba Pulsu, liczby-filtry */
    --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 i polecenia */
    --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; }
}