/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════ szklo-tokeny.css — TOKENY systemu designu „Szkło” panelu bleyo.ai (motyw jasny). Wersja 1 · 7.10.2026 · designer marki. Plik: hub/app/static/css/szklo-tokeny.css, ładowany PIERWSZY (base.html, przed bleyo.css). Plik zawiera WYŁĄCZNIE zmienne :root i @font-face — żadnych selektorów komponentów. Komponenty: szklo.css. Specyfikacja i uzasadnienia: docs/DESIGN_SYSTEM.md (reguła 20 huba). Zasada nazw: ROLA, nie kolor (--sz-system, nie --sz-orange). Kolor = znaczenie (K1, 01_designer.md §4): pomarańcz = system / AI robi, marka, przycisk główny (zleca pracę systemowi) bursztyn = człowiek: czeka na Twoją decyzję albo uwagę zieleń = działa / gotowe / wynik / włączone czerwień = błąd, strata, rzecz nieodwracalna (tylko tam) atrament = zaznaczone / wybrane grafit = neutralne, zamknięte, wyłączone Fioletu nie ma (wycofany z panelu — 01_designer.md §4). Liczby kontrastu: DESIGN_SYSTEM.md §2. ═══════════════════════════════════════════════════════════════════════════════════════════════════════ */ /* Geist — jeden krój panelu (OFL), hostowany lokalnie (static/fonty/), oś wag 100–900. ⛔ Podmiana pliku = nowa nazwa (podkatalog fonty/ nie wchodzi do static_version). */ @font-face{font-family:"Geist";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonty/geist-latin.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:"Geist";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonty/geist-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} :root{ color-scheme:light; /* ── 1. KRÓJ ─────────────────────────────────────────────────────────────────────────────────────── */ --sz-font:"Geist","Segoe UI",system-ui,-apple-system,sans-serif; --sz-cyfry:tabular-nums; /* każda liczba w panelu: kwoty, liczniki, daty, numery */ /* ── 2. SKALA PISMA — 7 stopni + liczba wyświetlana (zamiast 34 rozmiarów + 11 płynnych) ─────────── */ --sz-fs-1:12px; --sz-lh-1:16px; --sz-tr-1:.01em; /* podpis, meta, licznik, kbd */ --sz-fs-2:13px; --sz-lh-2:18px; --sz-tr-2:0; /* tekst pomocniczy, okruszki, podpowiedź pod polem, komórka drugiej linii */ --sz-fs-3:14px; --sz-lh-3:20px; --sz-tr-3:-.003em; /* tekst podstawowy UI: tabela, przycisk, menu, pole, etykieta */ --sz-fs-4:16px; --sz-lh-4:22px; --sz-tr-4:-.006em; /* tytuł okna, nagłówek kafla, tekst do czytania */ --sz-fs-5:20px; --sz-lh-5:26px; --sz-tr-5:-.012em; /* tytuł tafli / sekcji */ --sz-fs-6:28px; --sz-lh-6:34px; --sz-tr-6:-.02em; /* tytuł ekranu (h1) — komputer */ --sz-fs-7:36px; --sz-lh-7:40px; --sz-tr-7:-.025em; /* powitanie strony głównej */ --sz-fs-liczba:clamp(32px,2.6vw,44px); /* tylko liczba w kaflu „Liczby dnia” */ --sz-w-tekst:400; --sz-w-ui:500; --sz-w-tytul:600; --sz-w-liczba:650; --sz-w-mocny:700; /* ── 3. ODSTĘPY — siatka 4 px ───────────────────────────────────────────────────────────────────── */ --sz-o-1:4px; --sz-o-2:8px; --sz-o-3:12px; --sz-o-4:16px; --sz-o-5:20px; --sz-o-6:24px; --sz-o-7:32px; --sz-o-8:40px; --sz-o-9:48px; --sz-o-10:64px; /* ── 4. PROMIENIE — współśrodkowe (wewnętrzny = zewnętrzny − odstęp); 7 wartości zamiast 33 ─────── */ --sz-r-znacznik:6px; /* pole wyboru, kbd, miniatura 32 px */ --sz-r-wiersz:12px; /* wiersz listy / menu przy najechaniu, miniatura 40–56 px */ --sz-r-pole:14px; /* pole tekstowe, lista wyboru, obszar tekstu */ --sz-r-kafel:20px; /* kafel w tafli, zdjęcie w galerii, komunikat */ --sz-r-tafla:24px; /* tafla treści */ --sz-r-okno:28px; /* okno, arkusz, pasek boczny, dok */ --sz-r-pill:999px; /* KAŻDY przycisk, chip, segment, pigułka, licznik, szukajka */ /* ── 5. WYSOKOŚCI KONTROLEK — 3 zamiast 13; dotyk podnosi do 44 ──────────────────────────────────── */ --sz-h-s:32px; --sz-h-m:40px; --sz-h-l:48px; --sz-h-dotyk:44px; --sz-wiersz-h:56px; /* wiersz tabeli (gęsty: 44) */ /* ── 6. POWIERZCHNIE (jasne) ─────────────────────────────────────────────────────────────────────── */ --sz-tlo:#F2F0EA; /* scena — jedyne tło treści panelu (było #F4F2EC) */ --sz-tafla-pelna:#FFFEFB; /* tafla nieprzezroczysta: listy, tabele, formularze, karty obiektów */ --sz-tafla:rgba(255,254,251,.64); /* tafla szklana: TYLKO strona główna */ --sz-kafel:rgba(255,254,251,.58); /* kafel na stronie głównej */ --sz-belka:rgba(255,254,251,.78); /* belka u góry, pasek zapisu, panel funkcji (warstwa sterowania) */ --sz-okno:rgba(255,254,251,.90); /* okno, arkusz, menu rozwijane, tost jasny */ --sz-bok:rgba(12,12,14,.93); /* pasek boczny, dok stref, tost ciemny, pasek dolny telefonu — ciemne szkło */ --sz-pole:rgba(10,10,11,.045); /* wypełnienie pola (Apple „fill”) */ --sz-pole-hover:rgba(10,10,11,.065); --sz-hover:rgba(10,10,11,.04); /* najechanie wiersza / przycisku cichego */ --sz-wcisniety:rgba(10,10,11,.07); --sz-tor:rgba(10,10,11,.06); /* tor segmentu i zakładek */ --sz-przyciemnienie:rgba(10,10,11,.32); /* tło pod oknem (przyciemnienie ~35 % — HIG) */ /* ── 7. LINIE ─────────────────────────────────────────────────────────────────────────────────── */ --sz-linia:rgba(10,10,11,.09); /* jedna linia włosowa (zamiast #E4E1D8, #D3D1C7, #EEECE6) */ --sz-linia-mocna:rgba(10,10,11,.16); /* obrys pola, karta pytania */ --sz-linia-kontrolki:#8E8C86; /* obrys pola wyboru, tor przełącznika (3,3 : 1 — WCAG 1.4.11) */ /* ── 8. TEKST ─────────────────────────────────────────────────────────────────────────────────── */ --sz-t:#0A0A0B; /* 17,4 : 1 na scenie */ --sz-t2:#444441; /* tekst drugi 8,6 : 1 */ --sz-t3:#6B6963; /* meta, okruszki, podpowiedź, placeholder 4,8 : 1 — najjaśniejszy tekst do czytania */ --sz-t-wylaczony:#8E8C86; /* tylko kontrolka wyłączona (WCAG wyłącza ją z wymogu) */ --sz-t-na-ciemnym:#F2F0EA; --sz-t2-na-ciemnym:#C9C6BE; --sz-t3-na-ciemnym:#8E8C86; /* nigdy #FFF (księga stylu) */ --sz-t-na-kolorze:#FFFEFB; /* tekst na pomarańczu / czerwieni / atramencie */ --sz-t-grupa-na-ciemnym:#E6E3DB; /* nazwa grupy w ciemnym menu (13,0 : 1) */ --sz-bok-krawedz:#1C1C1D; /* obrys plakietki na ciemnej szynie (odcina licznik od ikony) */ /* ── 9. ZNACZENIA (K1) — wypełnienie · tekst · tło · linia ─────────────────────────────────────── */ --sz-system:#EA580C; --sz-system-t:#C2410C; --sz-system-tlo:rgba(234,88,12,.07); --sz-system-linia:rgba(234,88,12,.32); --sz-system-nacisk:color-mix(in srgb,#C2410C 88%,#0A0A0B); /* przycisk główny: najechanie (ciemniej = kontrast rośnie) */ --sz-czlowiek:#FFB020; --sz-czlowiek-t:#854F0B; --sz-czlowiek-tlo:rgba(255,176,32,.16); --sz-czlowiek-linia:rgba(133,79,11,.30); --sz-ok:#2FD67B; --sz-ok-t:#0F6E56; --sz-ok-tlo:rgba(15,110,86,.08); --sz-ok-linia:rgba(15,110,86,.28); --sz-ok-kropka:#0F6E56; /* na jasnym zieleń #2FD67B ma 1,7 : 1 — kropka bierze odcień tekstu */ --sz-blad:#FF3B30; --sz-blad-t:#B42318; --sz-blad-tlo:rgba(255,59,48,.08); --sz-blad-linia:rgba(180,35,24,.30); --sz-blad-nacisk:color-mix(in srgb,#B42318 86%,#0A0A0B); --sz-neutral:#6B6963; --sz-neutral-t:#444441; --sz-neutral-tlo:rgba(10,10,11,.055); --sz-atrament:#0A0A0B; --sz-atrament-t:#FFFEFB; /* zaznaczone / wybrane */ --sz-na-ciemnym-system:#FF8A45; /* pomarańcz tekstu na ciemnym szkle (7,3 : 1); wypełnienia dalej #EA580C */ --sz-na-ciemnym-czlowiek:#FFB020; --sz-na-ciemnym-ok:#2FD67B; --sz-na-ciemnym-blad:#FF6B61; /* ── 10. FOKUS ────────────────────────────────────────────────────────────────────────────────── */ --sz-fokus:#C2410C; /* obrys 2 px + odsunięcie 3 px; na ciemnym #FF8A45 */ --sz-fokus-pole:0 0 0 1px #C2410C,0 0 0 4px rgba(234,88,12,.18); /* ── 11. MATERIAŁY SZKŁA (Liquid Glass — tylko warstwa sterowania) ─────────────────────────────── */ --sz-blur:blur(30px) saturate(180%); --sz-blur-maly:blur(16px) saturate(170%); --sz-rim-jasny:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,254,251,.70),inset 0 -1px 0 rgba(10,10,11,.06); --sz-rim-ciemny:inset 0 1px 0 rgba(255,254,251,.20),inset 0 0 0 1px rgba(255,254,251,.08),inset 0 -1px 0 rgba(0,0,0,.30); --sz-polysk-jasny:radial-gradient(130% 90% at 12% -30%,rgba(255,255,255,.95),rgba(255,255,255,0) 62%); --sz-polysk-ciemny:radial-gradient(130% 70% at 10% -20%,rgba(255,254,251,.10),rgba(255,254,251,0) 60%); --sz-swiatlo:rgba(234,88,12,.10); /* światło sceny w rogach — szkło ma co rozmywać */ /* ── 12. CIENIE — 4 poziomy (zamiast 117) ─────────────────────────────────────────────────────── */ --sz-cien-1:0 1px 2px rgba(10,10,11,.06); /* pigułka, chip, miniatura */ --sz-cien-2:0 1px 2px rgba(10,10,11,.08),0 6px 16px -8px rgba(10,10,11,.22); /* przycisk drugi, pole w fokusie, zakładka wybrana */ --sz-cien-3:0 1px 2px rgba(10,10,11,.05),0 18px 44px -18px rgba(10,10,11,.22); /* tafla, belka */ --sz-cien-belka:0 1px 2px rgba(10,10,11,.06),0 10px 26px -14px rgba(10,10,11,.20); /* pływające paski: belka, panel — krótki cień, nie brudzi treści pod spodem */ --sz-cien-4:0 2px 6px rgba(10,10,11,.08),0 30px 70px -20px rgba(10,10,11,.40); /* okno, arkusz, menu, dok, tost */ --sz-cien-kostki:drop-shadow(0 10px 12px rgba(10,10,11,.18)); /* kostka 3D (strona główna, pusty stan) */ --sz-cien-glowny:0 1px 2px rgba(10,10,11,.10),0 8px 18px -8px rgba(194,65,12,.55); /* tylko przycisk główny */ /* ── 13. RUCH — sprężyny (apple-design / emil-animations) ─────────────────────────────────────── */ --sz-spring:linear(0,.147,.39,.599,.75,.849,.911,.949,.971,.984,.991,.995,1); /* bez odbicia: zakładki, rozwinięcia */ --sz-spring-odbicie:linear(0,.195,.513,.764,.914,.985,1.011,1.015,1.011,1.007,1.003,1.001,1); /* przełącznik, tost, sukces */ --sz-ease:cubic-bezier(.2,.8,.2,1); --sz-czas-1:.12s; /* kolor przy najechaniu, puszczenie wciśnięcia */ --sz-czas-2:.2s; /* zmiana stanu kontrolki */ --sz-czas-3:.32s; /* rozwinięcie, wskaźnik zakładki, arkusz boczny */ --sz-czas-4:.45s; /* okno, arkusz dolny, wejście tostu */ --sz-wcisniecie:.97;/* skala przy wciśnięciu — natychmiast, bez opóźnienia */ /* ── 14. WARSTWY (z-index) — 10 poziomów zamiast 28 ───────────────────────────────────────────── */ --sz-z-przyklejone:5; /* nagłówek tabeli */ --sz-z-pasek-zapisu:10; --sz-z-dok:20; --sz-z-belka:30; --sz-z-bok:40; --sz-z-menu:50; --sz-z-kostka:55; --sz-z-arkusz:60; --sz-z-okno:70; --sz-z-paleta:75; --sz-z-tost:80; --sz-z-pomin:100; /* ── 15. IKONY — jeden zestaw liniowy (siatka 24, kreska 1,75, zaokrąglone końce) ──────────────── */ --sz-ik-s:16px; --sz-ik-m:18px; --sz-ik-l:20px; --sz-ik-kreska:1.75; /* ── 16. UKŁAD ────────────────────────────────────────────────────────────────────────────────── */ --sz-bok-szer:272px; --sz-panel-szer:228px; --sz-bok-szyna:88px; /* menu główne zwinięte = szyna z podpisami; panel funkcji ZAWSZE rozwinięty (Adi 7.10) */ --sz-margines:12px; --sz-tresc-max:1240px; /* progi: telefon < 900 px (pasek dolny, arkusze), komputer ≥ 900, szeroki ≥ 1280. Reszta = zapytania kontenera. */ } /* Dostępność: mniej przezroczystości = materiały pełne (szkło znika, układ zostaje) */ @media (prefers-reduced-transparency:reduce){ :root{--sz-tafla:#FFFEFB; --sz-kafel:#FFFEFB; --sz-belka:#FFFEFB; --sz-okno:#FFFEFB; --sz-bok:#131316; --sz-blur:none; --sz-blur-maly:none; --sz-polysk-jasny:none; --sz-polysk-ciemny:none;} } /* Większy kontrast = mocniejsze linie i tekst trzeci ciemniejszy */ @media (prefers-contrast:more){ :root{--sz-linia:rgba(10,10,11,.22); --sz-linia-mocna:rgba(10,10,11,.42); --sz-t3:#444441; --sz-linia-kontrolki:#6B6963; --sz-tafla:#FFFEFB; --sz-kafel:#FFFEFB; --sz-belka:#FFFEFB; --sz-okno:#FFFEFB;} } /* Mniej ruchu = sprężyny zastąpione krótkim przenikaniem (komponenty czytają --sz-czas-*) */ @media (prefers-reduced-motion:reduce){ :root{--sz-czas-1:.01s; --sz-czas-2:.01s; --sz-czas-3:.01s; --sz-czas-4:.01s; --sz-wcisniecie:1;} }