/* Tokeny Szewko — jedyne źródło kolorów, krojów, odstępów i czasów. * * Przeniesione z `src/styles/theme.css` repo Reacta (fala 0, punkt 0.3). * Wartości są identyczne co do znaku — zmiana któregokolwiek odcienia tutaj * rozjeżdża motyw z 76 plikami canvasu, z których transkrybujemy sekcje. * * Czego świadomie NIE przeniesiono i dlaczego: * · `@custom-variant`, `@theme inline`, `@layer base` z `@apply` — składnia * Tailwinda, a w motywie Tailwinda nie ma (PORT.md §2a). * · blok tokenów shadcn/ui (`--background`, `--primary`, `--card`, `--chart-*`, * `--sidebar-*`) — mapowanie istniało po to, żeby prymitywy przywiezione * z Figma Make dziedziczyły paletę. W PHP nie ma tych prymitywów, więc * mapowanie nie ma czego karmić. To, co z niego wynikało dla wyglądu strony * (tło pergaminowe zamiast białego błysku), siedzi teraz w `base.css`. * · `.dark { … }` — projekt nie ma trybu ciemnego; wartości były domyślnymi * shadcn w oklch, spoza palety. * · reguła `body[data-szuflada="otwarta"] [data-cookie-banner]` — należy do * szuflady koszyka, nie do tokenów. Wraca w fali 3 razem z `mini-cart.php`; * tam też rozstrzyga się, jak ją zapiąć na banerze z wtyczki CMP, która * Reactowego `data-cookie-banner` nie postawi. * * Zasada nienaruszalna: zero surowych heksów poza tym plikiem. */ :root { /* ─── KOLORY ─────────────────────────────────────────── */ --color-smoked-tent: #1c1007; --color-desert-rust: #8b2e00; --color-sand-gold: #c8a96e; --color-camel-brown: #6b4a2a; --color-parchment: #f5e9d3; --color-brass-lantern: #d4a853; --color-dark-mahogany: #3d2b1f; --color-bleached-linen: #e8d5b0; --color-oasis-green: #2c5f2e; --color-terracotta: #7c3d1a; /* Terracotta rozjaśniona — WYŁĄCZNIE dla komunikatów błędu na ciemnym tle. Powód: --color-terracotta na --color-smoked-tent daje około 1,8:1, więc nie może nieść tekstu. Ten odcień daje 5,2:1 na tym samym tle. Na jasnych sekcjach nadal używamy --color-terracotta. Nie jest to nowy kolor marki i nie wchodzi do tł ani do akcentów. */ --color-terracotta-light: #c97a52; /* Oasis Green rozjaśniona — WYŁĄCZNIE dla znaku i obrysu komunikatu udanego na ciemnym tle. Ten sam powód, co przy Terracocie wyżej i ta sama granica użycia: `--color-oasis-green` na Dark Mahogany daje 1,3:1, więc nie unosi ani ikony, ani kreski. Ten odcień daje 3,9:1, czyli próg WCAG 1.4.11 dla elementu nietekstowego (tekst komunikatu niesie Pergamin, nie zieleń). ⚠︎ Nie da się go złożyć `color-mix()`-em z palety: mieszanka Oasis Green z Pergaminem idzie w stronę szałwii, bo Pergamin rozjaśnia i ODBARWIA naraz. Canvas rysuje wszystkie cztery warianty komunikatu tą wartością — jest to więc kolor przepisany z designu, a nie dobrany tutaj. Nie wchodzi do tł ani do akcentów. */ --color-oasis-green-light: #4c9a4e; /* Dwa kolory WYDRUKU, używane wyłącznie w `@media print`. Brief stron prawnych stawia wymóg wprost: „białe tło, czarny tekst" — a paleta marki nie ma ani czystej bieli, ani czerni i mieć nie powinna. Smoked Tent na Parchmencie jest ciepły i czytelny na ekranie; na czarno-białej drukarce zjada kontrast i toner naraz. Tokeny, a nie heksy w arkuszu: reguła „zero surowych heksów poza tym plikiem" obowiązuje także wtedy, gdy kolor z definicji stoi poza paletą. Nie wchodzą do żadnej powierzchni ekranowej. */ --color-druk-tekst: #000; --color-druk-tlo: #fff; /* ─── TYPOGRAFIA ─────────────────────────────────────── */ /* ⚠︎ Wysokość x w nawiasie to NIE ciekawostka — to jedyna liczba, z której wolno liczyć rozmiary. `font-size` nie jest rozmiarem, który widzi oko: te same 13 px dają 5,46 px wysokości x w kroju o x = 42 i 6,89 px w kroju o x = 53. Skala, wzór i tabela przeliczeń: `docs/TYPOGRAFIA.md` §4. Pomiary canvasem z 11.08.2026, na 100 px em. */ /* ⚠︎ Wersalik Cinzela to 72, a nie 103,5 — do 12.08 stała tu ta druga liczba. Zmierzona na literze `H`, czyli na ozdobniku wychodzącym ponad linię wersalika; litery bez wypustki (E, T) mają 72 i to jest miara. Sprostowanie i pełny rozstrzał liter: `docs/TYPOGRAFIA.md` §2. */ /* ⚠︎ SIEDEM TOKENÓW, TRZY RODZINY — decyzja T7 z 12.08.2026. Motyw miał sześć rodzin i wszystkie sześć to antykwy szeryfowe, więc oko nie czytało sześciu głosów, tylko jeden rozmyty: rodziny kosztowały transfer, nie kupując hierarchii. Wypadły Playfair Display, Libre Baskerville i Spectral. 444 kB → 223 kB, 18 plików → 8. Tokeny zostały WSZYSTKIE i to jest celowe. Rola „nagłówek" nadal jest czymś innym niż rola „etykieta interfejsu", choć dziś obie renderują się Literatą — a dopóki mają osobne tokeny, rozdzielenie ich z powrotem to jedna linia tutaj, a nie przeszukiwanie stu czterdziestu arkuszy. Rozróżnienie niesie dziś `font-weight` przy samej regule. */ --font-display: 'Cinzel Decorative', serif; /* x 70, wersalik 72 — tylko wersaliki ≥ 26 px */ /* Nagłówki — T7b z 12.08.2026, korekta w obrębie tych samych trzech rodzin. Przez pół dnia po T7 stała tu Literata i było to złe dobranie narzędzia. Literatę zaprojektowano dla Google Play Books, czyli do czytania ciągłego w MAŁYCH rozmiarach: niski kontrast kresek, duża wysokość x, tępe płozowate szeryfy, krótkie wydłużenia. Przy 13–16 px to są zalety i dlatego niesie interfejs. Przy 42 px te same cechy dają masę bez artykulacji — światła wewnątrz liter ciasne względem grubości kreski, sylwetka słowa zbita w blok. Właściciel nazwał to „pluszakowym" i nazwa jest trafna. Witryna jest stylizowana na dokument archiwalny („DOKUMENT POLECONY NR 001", pieczęć, podpisy „Fig. 1 —"), a ten rejestr niosą kroje o WYSOKIM kontraście kresek. Source Serif 4 ma go wyraźnie więcej od Literaty przy tej samej wysokości x co do dwóch dziesiątych. ⚠︎ Zmiana kosztuje ZERO bajtów: Source Serif 4 jest krojem zmiennym, więc plik dla zakresu 400–600 waży dokładnie tyle samo, co dla 400–700 — zmierzone, 50 824 B (latin) i 42 040 B (latin-ext) w obu wypadkach. */ --font-heading: 'Source Serif 4', serif; /* x 49,5 — waga 700; ← Literata (T7b) */ --font-product: 'Literata', serif; /* x 51 — waga 600; ← Libre Baskerville (T7) */ --font-body: 'Source Serif 4', serif; /* x 49,5 · kursywa 52 — ODNIESIENIE skali */ --font-ui: 'Literata', serif; /* x 51 — waga 400 */ /* Krój ceny — decyzja T2 z 11.08.2026, `docs/TYPOGRAFIA.md`. Do 11.08 cena szła w `--font-heading` (Playfair Display 700) i to był błąd z dwóch powodów naraz. Po pierwsze Playfair to didone: włoskowate kreski mają przy 16–20 px na Smoked Tencie ułamek piksela i po prostu znikają. Po drugie **nie ma cyfr tabelarycznych**, więc kolumna cen nie wyrównywała się do prawej mimo `text-align: right` — końcówki „zł" tańczyły. Source Serif 4 ma niski kontrast kresek i **cyfry tabelaryczne domyślnie**, bez żadnej deklaracji. Sprawdzone w przeglądarce: z trzech rodzin, jakie motyw ma po T7, tabelaryczne domyślnie ma tylko on. Literata dopiero po `font-variant-numeric: tabular-nums`. ⚠︎ To jest ten sam plik, co `--font-body` — osobny token istnieje po to, żeby cenę dało się przestawić jednym miejscem, a nie szukaniem po stu czterdziestu arkuszach. Nie zwijaj go do `--font-body`. ══════════════════════════════════════════════════════════════════════ ⚠︎ ZAKAZ: `--font-display` (Cinzel Decorative) NIE MA PRAWA dotknąć ceny ani żadnej innej liczby, którą czytelnik ma odczytać — kwoty, sumy, rabatu, numeru zamówienia, numeru przesyłki, licznika sztuk, procentu. Decyzja właściciela z 12.08.2026, przy T7. To nie jest kwestia gustu. Cinzel ma cyfry STAROFORMOWE i PROPORCJONALNE, zmierzone na 100 px em, waga 700: szerokość `1` 38,1 · szerokość `8` 60,3 → różnica 58 % wysokość `1` 60 · wysokość `8` 72 → `1` niższe o 17 % rozjazd `111` ↔ `999` 71,6 px (Source Serif 4: 0) Skutki są dwa i oba wychodzą dopiero na cenie czterocyfrowej. „1 249,00 zł" czyta się jak „ɪ 249,00 zł", bo jedynka siedzi na wysokości małej litery. A kolumna kwot rozjeżdża się o 0,7 em mimo `text-align: right`, bo cyfry mają różne szerokości i `tabular-nums` tego nie naprawia — Cinzel po prostu nie ma wariantu tabelarycznego do włączenia. Cena idzie w `--font-cena`. Zawsze. Sprawdzone 12.08: dziś Cinzel stoi wyłącznie na tytułach, nadtytułach i nazwach kategorii, ani razu przy liczbie — i tak ma zostać. ══════════════════════════════════════════════════════════════════════ */ --font-cena: 'Source Serif 4', serif; /* x 49,5 — waga 600 */ /* Krój akcentowy — decyzja T1 z 11.08.2026, `docs/TYPOGRAFIA.md`. Do 11.08 stał tu **IM Fell English** i było to źródło dwóch usterek naraz. Po pierwsze **nie ma polskich znaków i mieć nie będzie**: to krój odlany z XVII-wiecznych matryc Fella, a Google wystawia dla niego wyłącznie podzbiór `latin`, bo nie ma czego więcej wystawić. Każde ą, ę, ł, ń, ś, ź, ż wypadało z rodziny w środku słowa. Łata z 10.08 (Source Serif 4 podstawiony pod nazwę `IM Fell English` dla samego `latin-ext`) usuwała najgorszy objaw — `pamiĘta` zamiast `pamięta` — ale nie przyczynę: w jednym słowie nadal stały dwa różne kroje. **Łata wyszła razem z krojem**, więc `fonts.css` nie ma już sekcji „ZASTĘPNIK latin-ext" i nie należy jej odtwarzać. Po drugie miał wysokość x 44,5 w kursywie, drugą najniższą w motywie — a niósł teksty, które trzeba zrozumieć: liczniki skrzyni, komunikaty progu darmowej dostawy, noty o podziale przesyłki. Spectral, który stał tu od 11.08 do 12.08, wypadł razem z redukcją T7: miał wysokość x 45, najniższą z ówczesnych sześciu rodzin, a §3 i tak już zabraniało stawiać na nim treści, którą czytelnik musi zrozumieć. Krój, na którym nie wolno postawić tego, co ważne, nie zarabiał na 83 kB. ⚠︎ **Kursywa Source Serif 4 nie jest tu wyborem estetycznym, tylko jedyną możliwością.** Po T7 zostają trzy rodziny, a z nich Literata ma w motywie WYŁĄCZNIE odmianę prostą, Cinzel nie ma małych liter. Source Serif 4 jest więc jedynym krojem z prawdziwą kursywą, jaki witryna posiada — gdyby akcent poszedł w Literatę, przeglądarka pochylałaby odmianę prostą sama i w miejsce kursywy weszedłby rysunek, którego nikt nie narysował. Skutek uboczny na plus: x rośnie z 45 na 49,5, czyli akcent czyta się o 10 % większy przy tym samym `font-size`. ⚠︎ To jest ten sam plik, co `--font-body` — jak przy `--font-cena`. Osobny token zostaje, żeby dało się akcent odkręcić jednym miejscem. */ --font-accent: 'Source Serif 4', serif; /* x 49,5 · kursywa 52 — ← Spectral (T7) */ /* ─── ODSTĘPY ────────────────────────────────────────── */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 128px; /* ─── FALA WYDMY ─────────────────────────────────────── */ /* Wysokość separatora `dune-divider.php` — JEDNO źródło dla wszystkich, którzy liczą zapas pod falą albo nad nią. Do 07.08 wzór `szerokość / 18` był przepisany osobno w sześciu arkuszach; te kopie rozjeżdżały się przy każdej korekcie i dlatego mieszkają teraz tutaj. Fala ma `viewBox="0 0 1440 80"` i `preserveAspectRatio="none"`, a `base.css` daje `svg { height: auto }` — czyli sama z siebie skaluje się w proporcji 18:1. Rysunek jest przez to niezmienniczy wobec skali: przy 368 px to ta sama wydma co przy 1440 px, tylko 3,9 × mniejsza, przy wychyleniu grzbiet↔dolina 5,5 px. Reszta strony nie maleje razem z nią, więc na telefonie fala przestawała czytać się jak wydma (zgłoszenie właściciela 08.08, zrzuty przy 1276 / 534 / 368 px). PODŁOGA łamie tę proporcjonalność od dołu: poniżej progu fala ma stałą wysokość, powyżej — dawną proporcjonalną. `max()` przełącza się sama. próg = podłoga × 18 = 1008px ⟵ powyżej niego NIC się nie zmienia ⚠︎ `--fala-h` liczy z `100vw`, czyli razem z paskiem przewijania — mija się z realną falą o ~0,8 % (przy 1920 px: pół piksela). To jest w granicach szwu i było już przyjęte w `dziennik-wyroznienie.css`. ⚠︎ Zmiana `--fala-podłogi` wymaga ZMIANY PROGU w `@media` w `dune-divider.css` — media queries nie czytają zmiennych. Próg to zawsze podłoga × 18. Wartość 56 px: rewizja D71 z 08.08.2026. Rozpisany wybór między 40, 56 a 72 px stoi w `PO-PORCIE.md` §D. */ --fala-podloga: 56px; --fala-h: max(var(--fala-podloga), calc(100vw / 18)); /* Powierzchnia wydmy leży 0,552 wysokości fali nad jej dołem (średnia linia piasku ścieżki `szewko_fala_sciezka()`: y = 35,86 z 80). To ta linia, nie krawędź sekcji, jest tym, co oko czyta jako styk. */ --fala-piasek: calc(var(--fala-h) * 0.552); /* O ile podłoga podniosła falę względem dawnej proporcji. **Powyżej progu wychodzi zero**, bo `--fala-h` schodzi wtedy do `100vw / 18` — więc reguła napisana na tej zmiennej sama się wyłącza na desktopie i nie potrzebuje `@media`. Tego używa `home-hero.css`, żeby podnieść karawanę dokładnie o tyle, o ile urósł pod nią piasek. */ --fala-przyrost: calc(var(--fala-h) - 100vw / 18); /* Szerokość rysunku fali względem ekranu **poniżej progu**. Steruje LICZBĄ FALOWAŃ, nie wysokością — SVG jest szerszy od opakowania, a nadmiar zostaje przycięty, więc widać dłuższy odcinek tej samej krzywej zamiast ściśniętej całości. Amplitudy nie dotyka. falowania na ekranie = 266,7 / --fala-rozciag 100 % → 2,7 (tak było) · 133 % → 2 · 178 % → 1,5 · 267 % → 1 Wartość 177,78 % (1,5 falowania) — decyzja właściciela z 10.08.2026, D71b. Czyta ją wyłącznie `dune-divider.css`; mieszka tutaj, bo to druga gałka tej samej rzeczy co `--fala-podloga` i obie trzeba widzieć naraz. */ --fala-rozciag: 177.78%; /* ─── PROMIENIE ──────────────────────────────────────── */ --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-full: 9999px; /* ─── CIENIE ─────────────────────────────────────────── */ --shadow-card: 0 2px 8px rgba(28, 16, 7, 0.3); --shadow-card-hover: 0 8px 24px rgba(28, 16, 7, 0.4); --shadow-nav: 0 2px 16px rgba(28, 16, 7, 0.5); /* Zewnętrzna obwódka obrysu ogniskowej (K6, 11.08.2026). * * Obrys skupienia jest DWUWARSTWOWY, bo jednowarstwowy nie ma na tej palecie * jak zadziałać: Sand Gold daje 8,31:1 na Smoked Tencie i **1,87:1 na * Pergaminie**, a żaden inny kolor nie przekracza 3:1 na wszystkich tłach * naraz. Złoty `outline` niesie widoczność na ciemnym, ta obwódka — na jasnym. * Na ciemnych sekcjach jest niewidoczna (Smoked Tent na Smoked Tencie to 1,00) * i o to chodzi: tam, gdzie było dobrze, nic się nie zmienia. * * ⚠︎ **Reguła jest w `base.css` i wystarcza wszędzie POZA miejscami, które * ustawiają własny `box-shadow` w `:focus-visible`** — kaskada idzie * po właściwości, więc taka reguła kasuje obwódkę bez śladu. W tych miejscach * wpleć ten token na POCZĄTEK listy cieni: * * box-shadow: var(--pierscien-ogniskowej), 0 6px 18px …; * * ⚠︎ **5 px, nie 6.** `outline` zajmuje pas 2–4 px od krawędzi, więc za nim * zostaje 1 px obwódki — i to wystarcza, bo grubość nie wchodzi do rachunku * kontrastu. Przy 6 px pierścień zaczyna zachodzić na sąsiednie kontrolki * w miejscach, gdzie dziś jeszcze nie zachodzi (zmierzone: `docs/KONTRAST.md` * §6a.1, tabela miejsca na pierścień). */ --pierscien-ogniskowej: 0 0 0 5px var(--color-smoked-tent); /* ─── RUCH ───────────────────────────────────────────── */ --ease-desert: cubic-bezier(0.25, 0.46, 0.45, 0.94); --ease-sand: cubic-bezier(0, 0, 0.2, 1); --ease-wind: cubic-bezier(0.4, 0, 1, 0.6); --duration-fast: 150ms; --duration-mid: 300ms; --duration-slow: 600ms; --duration-drift: 1200ms; /* ─── GRADIENTY ──────────────────────────────────────── */ --gradient-desert-dusk: linear-gradient(135deg, #1c1007 0%, #3d2b1f 40%, #6b4a2a 70%, #c8a96e 100%); --gradient-sunrise-glow: linear-gradient(135deg, #8b2e00 0%, #c8a96e 100%); --gradient-parchment-fade: linear-gradient(180deg, #f5e9d3 0%, #e8d5b0 100%); /* Tło hero „Namiot Narratora". Cztery przystanki od nocy do rozgrzanego piasku; odcienie pośrednie NIE są kolorami marki i nie dostają własnych tokenów — istnieją wyłącznie jako punkty tego przejścia. */ --gradient-narrator-tent: linear-gradient(135deg, #0d0803 0%, #2a1f15 40%, #4a3520 70%, #8b6f47 100%); /* Tło sekcji „O Szewko". Camel Brown → Dark Mahogany → Smoked Tent, PIONOWO. Kierunek 180deg, nie 135deg: sekcja stoi między falą wydmy w Camel Brown od góry a Smoked Tent od dołu, więc obie krawędzie muszą mieć jeden kolor na całej szerokości. Przy 135deg na styku ze stopką widać poziomą linię (`poprawki/strona-glowna-w0-r1.md`, punkt 10). */ --gradient-tent-dusk: linear-gradient(180deg, #6b4a2a 0%, #3d2b1f 50%, #1c1007 100%); } /* ─── REGUŁA KONTRASTOWA ─────────────────────────────────── * * Ustalenie z 30–31.07.2026 (`.design-sync/conventions.md`), wiążące wszędzie: * **na ciemnym tle żadna czerwień z palety nie niesie komunikatu.** * Desert Rust i Terracotta na Smoked Tencie dają ~1,8:1. Trzy konsekwencje: * * 1. Cena na ciemnym idzie w `--color-sand-gold` — nie w Desert Rust * (nieczytelny) i nie w Parchment (zrównuje cenę z akapitem, więc cena * przestaje być najmocniejszym elementem bloku). Dotyczy kart w ciemnych * pasach, szuflady koszyka, `/koszyk` i podsumowań kasy. * 2. Błąd wymaga ODWRÓCENIA POLA: jasna płytka `--color-parchment` z tekstem * i ikoną w `--color-terracotta` (6,89:1), ostry róg `--radius-sm`, * komunikat inline przy polu albo pod przyciskiem — nigdy znikający toast. * Wariant „czerwony tekst na przygaszonym czerwonym tle" to 1,63:1. * 3. `--color-sand-gold` na `--color-camel-brown` to 3,55:1 — za mało dla * tekstu (próg 4,5:1), a to najczęstsze użycie tego koloru w projekcie * (drobne rozstrzelone wersaliki). Na Camel Brown nadtytuły idą * w `--color-parchment`. * * ─── PAROWANIE SAND GOLDU (D76, 07.08.2026) ──────────── * * Punkt 3 wyżej opisuje JEDNĄ parę; reguła jest szersza i została * rozstrzygnięta wprost, bo właściciel spytał, czy nie rozjaśnić samego * tokenu. **Nie rozjaśniamy.** Sand Gold przechodzi AA na dwóch * powierzchniach, które realnie niosą tekst na ciemnym — Smoked Tent * **8,31:1** i Dark Mahogany **5,98:1** — a rozjaśnienie nic nie kupuje: * Brass Lantern zyskuje na Camel Brown 0,06, a żeby dobić 4,5:1, trzeba * pójść 28 % ku bieli (`#d7c197`) — token czyta **124 arkusze**, a `#c8a96e` * rysuje **76 plików canvasu**. * * Zamiast rozjaśniania obowiązuje parowanie: * * · **tekst na Smoked Tent i Dark Mahogany** → `--color-sand-gold`; * · **tekst na średnich brązach** — Camel Brown, Terracotta, Desert Rust, * Oasis Green i środek `--gradient-desert-dusk` — → * `--color-bleached-linen` (5,24:1 na najgorszym z nich, Oasis Green; * 5,53 na Camel Brown, 6,71 na środku Desert Dusku). Pełna macierz * trzech kandydatów na siedmiu tłach stoi w **D76**; * · **jako obrys albo ikona** Sand Gold zostaje **wszędzie** — element * nietekstowy ma próg 3:1, który trzyma także na Camel Brownie. * * ⚠︎ **GRADIENT NIE MA JEDNEGO KOLORU I DLATEGO NIE MA JEDNEJ ODPOWIEDZI.** * `--gradient-desert-dusk` biegnie od Smoked Tentu do samego Sand Goldu, więc * to, który człon reguły obowiązuje, zależy od POŁOŻENIA elementu na * gradiencie — i zmienia się razem z szerokością okna. Koloru tła **nie * bierz z tokenu**: próbkuj piksel (`docs/KONTRAST.md`). * * ⚠︎ **Granica przemiaru, który stał za tą regułą:** sweep po 124 arkuszach * łapie pary zadeklarowane w JEDNEJ regule CSS — tła dziedziczone z rodzica * pomija. Znalazł cztery trafienia i **żadne nie było tekstem poniżej progu** * (dwa hovery ku Mahoniowi 4,75 i 4,92; obrys paginacji konta — tekst jest * Parchmentem; ikona w `sklep-pusty__pole` — obrys i ikona mają próg 3:1). * ⚠︎ **Pomiar pikseli 20.08.2026 pokazał, że sweep pominął na `/404` nie jeden * napis, tylko CZTERY** — odnośnik notki, sam akapit notki, podtytuł i napis * przycisku z obrysem. Wszystkie cztery leżą na gradiencie z rodzica, czyli * dokładnie w martwym polu sweepu, i żaden nie trzymał progu przy 390 px * (2,45–3,88:1). Naprawione tego samego dnia — `strona-404.css`. * * ⚠︎ **Jedno miejsce obyło się bez Bleached Linenu i to jest granica tej * reguły:** przy dole strony 404 na 390 px tło jest już tak jasne, że Bleached * Linen daje **3,81:1**. Poszedł tam pełny Parchment (4,57:1, zapas 0,07). * **Reguła parowania ma więc trzeci człon, którego `D76` nie przewidziało: * na NAJJAŚNIEJSZYM odcinku gradientu tekst idzie w `--color-parchment`, * a jeżeli i to nie starcza, sprawa przestaje być kolorem i staje się * geometrią** — nad Parchmentem paleta nie ma nic jaśniejszego. * * Desert Rust i Terracotta zostają tam, gdzie działają: w gradiencie * `--gradient-sunrise-glow`, na jasnych powierzchniach (Desert Rust na * Parchment = 6,7:1) i jako krawędź graficzna bloków ostrzegawczych na jasnym. * * ⚠︎ `--gradient-sunrise-glow` NIESIE JEDNAK TEKST na przycisku zakupu, wbrew * zdaniu wyżej, i to jest **świadome odstępstwo z ceną** (D-K5, 11.08.2026): * gradient biegnie do Sand Goldu, więc Pergamin na nim spada z 7,02:1 na lewym * krańcu do **1,87:1 na prawym**. Właściciel wybrał zachowanie gradientu. * Cena zapisana w `docs/PO-PORCIE.md`; nie „naprawiaj" tego bez decyzji. * * ─── PROGI KRYCIA (K3, 11.08.2026) ──────────────────────── * * Motyw przygasza tekst wzorem `color-mix(in srgb, var(--color-…) N%, * transparent)` w ponad 250 miejscach. **Ten sam procent znaczy co innego na * innym tle** — Parchment 70 % daje 7,97:1 na Smoked Tencie i 4,18:1 na Camel * Brownie. Poniżej minimalne N, przy którym tekst zwykły trzyma jeszcze 4,5:1 * (zmierzone sondą `scripts/audyt-kontrastu.js`, pełna tabela w `docs/KONTRAST.md`): * * tekst \ tło Smoked Tent Dark Mahogany Camel Brown Parchment * Parchment 50 % 55 % 75 % — * Sand Gold 70 % 85 % ✖ nigdy — * Brass Lantern 70 % ~85 % ✖ nigdy — * Bleached Linen ~45 % ~50 % 85 % — * Dark Mahogany — — — 70 % * Smoked Tent — — — 60 % * * ⚠︎ Na Camel Brown przygaszanie Sand Gold i Brass Lantern jest **zakazane * w każdym stopniu** — te kolory nie unoszą tam tekstu nawet przy 100 % * (3,55:1 i 3,61:1). Camel Brown jest najtrudniejszym tłem palety: unoszą na * nim tekst wyłącznie Parchment i Bleached Linen. * * Dla tekstu DUŻEGO (≥24 px, albo ≥18,66 px przy grubości ≥700) próg to 3:1 * i te liczby nie obowiązują — ale wtedy sprawdź rozmiar w `docs/TYPOGRAFIA.md`, * zamiast zakładać, że jest duży. * * Klasa pomocnicza jest jedna, bo jest jedna na całą witrynę i nie należy * do żadnego pojedynczego szablonu: */ .szewko-komunikat-bledu { display: flex; gap: var(--space-sm); align-items: flex-start; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); background: var(--color-parchment); color: var(--color-terracotta); font-family: var(--font-ui); }