/* ═══════════════════════════════════════════════════════════════════ Dietlo — TOKENY. Jedyne zrodlo prawdy dla kolorow, typografii, promieni, ruchu i wysokosci nawigacji. Ten plik laduje sie PIERWSZY; wszystkie pozostale arkusze deklaruja go jako zaleznosc (mu-plugins/dietlo/shared/assets.php). ZASADA: w pozostalych plikach CSS nie wpisujemy wartosci, ktora ma tu swoj token. Pilnuje tego JEDEN skrypt: `scripts/check-css-tokens.sh` — wpiety w CI, job `verify` w .github/workflows/deploy-production.yml (kroki "Raport dlugu tokenow CSS" i "Nie wprowadzaj nowych wartosci zamiast tokenow CSS"). Dlug istniejacy tylko raportuje, NOWE linie blokuja pipeline. Lokalnie: `bash scripts/check-css-tokens.sh`. Zapis `var(--dietlo-green, #55b947)` jest poprawny (fallback) i nie jest zglaszany — skrypt wycina wyrazenia var() oraz tresc komentarzy, zanim zacznie szukac. Bez tego raportowal 120 trafien zamiast 6, a w trybie --added blokowalby PR za napisanie prawidlowego fallbacku. Sprostowanie historii tego komentarza: wersja pierwsza mowila o stylelint i `.stylelintrc.json` — te nigdy nie powstaly. Wersja druga twierdzila, ze w CI nie ma zadnej kontroli CSS — bylo to prawda w chwili pomiaru, ale `check-css-tokens.sh` powstal rownolegle i luke zamknal. Wersja trzecia opisywala dwie rownolegle implementacje — ta w PowerShellu zostala usunieta, zeby regula miala jedno zrodlo. Nie dodawaj tokenu "na zapas". Token powstaje, gdy ta sama wartosc pojawia sie w co najmniej dwoch miejscach. ═══════════════════════════════════════════════════════════════════ */ /* ── Krój naglowkowy: hostowany u nas ────────────────────────────────── Wczesniej `--dietlo-font-display` byl wylacznie stosem fontow SYSTEMOWYCH, wiec kazdy system pokazywal inny krój: macOS -> Iowan Old Style, Windows -> Palatino Linotype, Android/Linux -> Georgia. Wlasciciel zatwierdzil wyglad na Windowsie, czyli Palatino - i tylko on go widzial. TeX Gyre Pagella to klon Palatino od GUST (Polska Grupa Uzytkownikow TeX-a). Licencja: GUST Font License, prawnie tozsama z LPPL - wolno uzywac komercyjnie i hostowac u siebie. Kopia licencji lezy obok plikow w ../fonts/GUST-FONT-LICENSE.txt. Pliki sa zawezone (pyftsubset) do Latin + Latin Extended-A, wiec pelne polskie diakrytyki zostaja, a trzy odmiany wazą razem 81 KB zamiast 670 KB w OTF. Stos systemowy zostaje jako fallback na czas ladowania i dla przegladarek bez woff2. */ @font-face { font-family: "TeX Gyre Pagella"; src: url("../fonts/texgyrepagella-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "TeX Gyre Pagella"; src: url("../fonts/texgyrepagella-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* Kursywa jest realnie uzywana: naglowki sekcji `.dietlo-product-carousel__title`, `.dietlo-help__title`, `.dietlo-article-related__title` oraz cytaty. */ @font-face { font-family: "TeX Gyre Pagella"; src: url("../fonts/texgyrepagella-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } :root { /* ── Kolor: marka ─────────────────────────────────────────────── */ --dietlo-green: #55b947; --dietlo-green-dark: #348b2e; /* Ciemna zielen. NIE jest juz wypelnieniem przyciskow - decyzja wlasciciela 2026-07-29: zielone CTA maluje `--dietlo-green` (wzorem hero na home), bo hero jest referencja wygladu. Kontrast bialego tekstu na zieleni marki to 2.5:1, ponizej WCAG AA - swiadomy wybor, nie usterka. Ten token zostaje dla tekstu i ikon na jasnym tle, gdzie sam daje 5.2:1 i jest uzywany w kilkunastu miejscach. */ --dietlo-green-cta: #2e7c28; --dietlo-purple: #7022d7; /* ── Kolor: tresc i powierzchnie ──────────────────────────────── */ --dietlo-text: #181b22; --dietlo-muted: #606774; --dietlo-soft: #f5f8f6; /* Dwie powierzchnie sekcji po stronie fioletu (decyzja wlasciciela 2026-07-28). Pierwsza: pelny fiolet jako tlo, tekst na nim bialy. Druga: jasna, "szara" powierzchnia pod tresc, tekst ciemny. Zastepuja dryf wpisany wczesniej na sztywno (#a671ee, #a372ef, #f8f7fc, #f5f4f7). */ --dietlo-purple-surface: #a671ee; --dietlo-purple-surface-2: #f5f4f7; --dietlo-line: #e7ece8; --dietlo-card: #ffffff; /* ── Typografia ───────────────────────────────────────────────── */ /* Skala rozmiarow tekstu (2026-07-28). Wyprowadzona z pomiaru, nie narzucona: kazdy krok to wartosc, ktora JUZ dominowala w kodzie (12px x44, 13px x45, 14px x55, 15px x45, 16px x25, 18px x15, 20px x11, 22px x8). Migracja objela wylacznie dokladne trafienia, wiec adopcja skali nie zmienila ani jednego piksela. Nazwy oznaczaja POZYCJE na skali, nie role elementu. Orientacyjne zastosowania: xs metki/eyebrow, sm drugorzedne UI, md standardowe UI i przyciski, base tekst ciagly powierzchni marketingowych, lg tekst artykulow i pola formularzy (minimum iOS!), xl lead, 2xl/3xl male tytuly kart i podsekcji. Poza skala zostaja swiadomie: - naglowki display: pozostaja na clamp() per sekcja (62 unikalne wyrazenia; konsolidacja do rol h1/h2/h3 wymaga akceptacji before/after wlasciciela - patrz design-system-state.md), - 11px, 17px, 19px, 21px i ulamki (12.5px itd.) - dlug do decyzji przypadek po przypadku, NIE zamieniac na najblizszy krok. */ --dietlo-text-xs: 12px; --dietlo-text-sm: 13px; --dietlo-text-md: 14px; --dietlo-text-base: 15px; --dietlo-text-lg: 16px; --dietlo-text-xl: 18px; --dietlo-text-2xl: 20px; --dietlo-text-3xl: 22px; --dietlo-font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Pierwszy jest nasz webfont; reszta to stary stos systemowy jako fallback. */ --dietlo-font-display: "TeX Gyre Pagella", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif; --dietlo-letter-display: -0.015em; --dietlo-letter-eyebrow: 0.08em; --dietlo-line-body: 1.65; --dietlo-line-display-tight: 1.05; --dietlo-line-display: 1.18; /* ── Promienie ────────────────────────────────────────────────── */ /* Radius scale: actions, fields, ordinary cards, and feature panels. */ --dietlo-radius-control: 8px; --dietlo-radius-pill: 999px; --dietlo-radius-field: 14px; --dietlo-radius-card: 20px; --dietlo-radius-panel: 28px; --dietlo-radius: var(--dietlo-radius-card); /* ── Elewacja ─────────────────────────────────────────────────── */ /* Trzy poziomy glebi dla cieni NEUTRALNYCH. Dobor po promieniu rozmycia: <=20px -> sm, 21-34px -> md, >=35px -> lg. Skala NIE obejmuje i nie ma obejmowac: - cieni kolorowych (zielone/fioletowe poswiaty CTA, pierscienie focus) - to afordancja stanu, nie glebia, - `inset` (obwodki, pierscienie), - cieni skierowanych do gory (`0 -Npx`) na paskach sticky, - cieni DWUWARSTWOWYCH (kontaktowy + ambientowy) - warstwowanie jest swiadoma technika, nie dryfem. Zostaja zapisane wprost. */ --dietlo-shadow-sm: 0 4px 12px rgba(24, 27, 34, 0.06); --dietlo-shadow-md: 0 12px 28px rgba(24, 27, 34, 0.07); --dietlo-shadow-lg: 0 18px 45px rgba(24, 27, 34, 0.09); /* Alias historyczny - byl w uzyciu, zanim powstala skala. */ --dietlo-shadow: var(--dietlo-shadow-lg); /* ── Ruch (patrz rules.md "Design Language") ──────────────────── */ --dietlo-motion-fast: 150ms; --dietlo-motion-base: 240ms; --dietlo-motion-reveal: 1300ms; --dietlo-motion-journey: 1700ms; --dietlo-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dietlo-ease-premium: cubic-bezier(0.22, 1, 0.36, 1); /* ── Nawigacja ────────────────────────────────────────────────── */ /* Wysokosc paska = min-height kontenera .ct-container w #header (base-pages.css). Zmiana tam wymaga zmiany tutaj. */ --dietlo-header-height: 70px; --dietlo-admin-bar-height: 0px; /* Wspolna lewa krawedz nawigacji mobilnej: ikona triggera w #header i tekst pozycji w panelu #offcanvas startuja z tej samej wartosci. Jeden wlasciciel zamiast osobnych 16px/20px w kazdym z kontenerow. */ --dietlo-nav-gutter: 20px; } @media (min-width: 1000px) { :root { --dietlo-header-height: 64px; } } /* Pasek admina WordPressa istnieje tylko dla zalogowanych i sam jest fixed. Klasa `admin-bar` siedzi NA , wiec selektor musi byc `body.admin-bar`, nie `.admin-bar body` (ten drugi nie pasuje do niczego). */ body.admin-bar { --dietlo-admin-bar-height: 32px; } @media screen and (max-width: 782px) { body.admin-bar { --dietlo-admin-bar-height: 46px; } } /* Ile miejsca musi zostac wolne pod stala nawigacja. Rezerwuje je wylacznie `body` w base-pages.css — sekcje dokladaja juz tylko wlasny oddech i nigdy nie powtarzaja tej wartosci. */ body:not(.wp-admin) { --dietlo-header-offset: calc(var(--dietlo-header-height) + var(--dietlo-admin-bar-height)); } /* ─────────────────────────────────────────────────────────────────── NASTEPNY KROK (nie zrobiony swiadomie — wymaga decyzji wlasciciela) Pomiar z 2026-07-28 na 14 200 liniach CSS: - 115 unikalnych kolorow hex wpisanych na sztywno, - 58 unikalnych wartosci px w padding/margin/gap, - ~124 z tych hexow to duplikaty tokenow, ktore juz sa wyzej (#55b947 x33, #181b22 x26, #e7ece8 x21, #606774 x17, #7022d7 x11). Duplikaty lapie stylelint. Redukcja pozostalych ~350 wartosci do skali spacingu i palety to osobna robota: czesc z nich to swiadome decyzje projektowe, wiec nie da sie tego zrobic mechanicznie. Najczestsze odstepy, gdyby przyszlo definiowac skale: 18px(92) 16px(89) 24px(88) 14px(83) 20px(82) 8px(79) 22px(68) 12px(68) 10px(65) 28px(54) 32px(41) 26px(36) ─────────────────────────────────────────────────────────────────── */