/* źródło: bleyo-ai hub Szkło (hub/app/static/css/szklo-tokeny.css), kopia 2026-10-13 — tylko czytamy oryginał; zmiany Mozgo w mozgo.css */
/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════
   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:#F1F1F1;                              /* scena — neutralna biel bez beżu (Adi 11.10; było #F2F0EA, przed Szkłem #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. */

  /* ── 17. KONCEPCJA C „MOSTEK” (Adi 11.10.2026): warstwy menu + CIEMNA SCENA tylko na stronie głównej (reszta panelu jasna) ── */
  --sz-warstwa-ty-tlo:rgba(255,176,32,.07);     --sz-warstwa-ty-linia:rgba(255,176,32,.22);
  --sz-warstwa-linia:rgba(255,254,251,.07);
  --sz-cien-kostki-zespolu:drop-shadow(0 3px 7px rgba(234,88,12,.35));
  --sz-mozg-tlo:#0A0A0B;                        /* scena strony głównej = czerń strony bleyo.ai (Adi 11.10: czarny, nie granatowy) */
  --sz-mozg-tlo-gora:#111112;
  --sz-mozg-mgla:rgba(242,240,234,.05);
  --sz-mozg-kostka:#1A1A1B;                     /* kostka pola — neutralny grafit */
  --sz-mozg-kostka-blask:rgba(242,240,234,.08); /* górna krawędź kostki pola */
  --sz-mozg-kostka-sygnal:#EA580C;              /* kostka, która coś zrobiła (zdarzenie z dziennika) */
  --sz-mozg-tafla:rgba(19,19,22,.60);           /* szkło na scenie = --g-srednie strony bleyo.ai */
  --sz-mozg-tafla-gesta:rgba(19,19,22,.80);
  --sz-mozg-linia:rgba(242,240,234,.10);
  --sz-mozg-linia-mocna:rgba(242,240,234,.18);
  --sz-mozg-hover:rgba(255,254,251,.06);
  --sz-mozg-noc:rgba(142,140,134,.22);          /* łuk nocnej zmiany na tarczy doby */
  --sz-mozg-poswiata:radial-gradient(60% 60% at 50% 50%,rgba(234,88,12,.13),rgba(234,88,12,0) 70%);
  --sz-mozg-winieta:radial-gradient(70% 60% at 50% 55%,rgba(10,10,11,0),rgba(10,10,11,.55));
  --sz-mozg-blask-oka:0 0 14px rgba(234,88,12,.85);
  --sz-mozg-ramka-firmy:0 0 0 1px rgba(255,255,255,.30),inset 0 0 0 1px rgba(255,255,255,.22),0 0 46px rgba(234,88,12,.45);
  --sz-mozg-szklo-odblask:linear-gradient(140deg,rgba(255,255,255,.40),rgba(255,255,255,0) 35%),linear-gradient(0deg,rgba(234,88,12,.30),rgba(234,88,12,0) 50%);
  --sz-mozg-firma-cien:linear-gradient(90deg,rgba(19,19,22,0) 35%,rgba(19,19,22,.95) 100%);
  --sz-mozg-czlowiek-ramka:inset 0 0 0 1px rgba(255,176,32,.45),0 20px 50px -24px rgba(255,176,32,.40);
  --sz-mozg-czlowiek-tlo:rgba(255,176,32,.14);
  --sz-mozg-system-tlo:rgba(234,88,12,.14);
  --sz-mozg-ok-tlo:rgba(47,214,123,.12);
  /* tło panelu = siatka linii i węzłów (Adi 11.10, tło 4): czarna na stronie głównej, biała na reszcie; neutralnie, bez beżu i granatu */
  --sz-siatka-krok:48px;
  --sz-siatka-linia-jasna:rgba(10,10,11,.07);     --sz-siatka-wezel-jasny:rgba(10,10,11,.20);
  --sz-siatka-linia-ciemna:rgba(242,240,234,.06); --sz-siatka-wezel-ciemny:rgba(242,240,234,.26);
  /* 11.10 wieczór (Adi, wariant 3 „Trzy tony” z makiety „Układ panelu Bleyo”): jasny panel = czysta biel BEZ siatki (siatka tylko na stronie głównej) */
  --sz-pole-tlo:#FFFFFF;  --sz-pole-tlo-gora:#FFFFFF;
  /* podmenu (panel funkcji modułu) = jasnoszara tafla między czarnym menu a białą treścią; wybrana pozycja = biała karta */
  --sz-podmenu-tlo:#F5F5F4;  --sz-podmenu-hover:#ECECEA;  --sz-podmenu-wybrana:#FFFFFF;  --sz-podmenu-linia:#E3E2DF;
  --sz-podmenu-cien:0 1px 2px rgba(10,10,11,.07),0 0 0 1px rgba(10,10,11,.04);
  --sz-podmenu-t4:#A3A19B;  --sz-licznik-tlo:#E9E9E7;
  /* menu C4 (Adi 11.10, makieta „Menu finalne Bleyo”): przełącznik Fundament / Zespoły AI z pomarańczowym wskaźnikiem, karta Modułów */
  --sz-menu-tor:rgba(255,254,251,.06);  --sz-menu-wybor:rgba(255,254,251,.12);  --sz-menu-wybor-swiatlo:inset 0 1px 0 rgba(255,254,251,.10);
  --sz-menu-hover:rgba(255,254,251,.05);  --sz-menu-linia:rgba(255,254,251,.07);  --sz-menu-ciche:#A9A6A0;  --sz-menu-opis:#8E8C86;
  --sz-menu-wsk-blask:0 0 8px rgba(234,88,12,.8);  --sz-menu-kostka-blask:drop-shadow(0 2px 6px rgba(234,88,12,.5));
  --sz-zespol-biezacy:rgba(234,88,12,.12);  --sz-zespol-biezacy-linia:inset 0 0 0 1px rgba(234,88,12,.30);  --sz-zespol-ciepla:#FFB98A;
  --sz-moduly-karta:linear-gradient(160deg,rgba(255,254,251,.07),rgba(255,254,251,.025));  --sz-moduly-kwadrat:rgba(255,254,251,.12);
  --sz-moduly-kwadrat-blask:0 0 6px rgba(234,88,12,.6);  --sz-moduly-glowny:rgba(234,88,12,.16);  --sz-moduly-hover:inset 0 0 0 1px rgba(234,88,12,.45);
  --sz-mozg-belka-ramka:inset 0 0 0 1px rgba(255,254,251,.08),0 10px 24px -14px rgba(10,10,11,.6);
}

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