/* Tokeny serwisu Feuer.pl — custom properties. Jedyne źródło tokenów serwisu (docs/podejscie-css.md). Wartości px z Figmy są danymi wejściowymi — w CSS rem, baza 16 px. Kolory i typografia wg sekcji Atoms pliku Feuer DS (snapshot 2026-07-20, figma/feuer-ds.json.gz; task03.03) — kanoniczna skala, zastępuje wartości wyprowadzone z Page 9. Tokeny oznaczone „poza skalą DS" pochodzą z Page 9 i trzymają istniejące komponenty do czasu ich analizy wg DS. Nazwy semantyczne — funkcją, nie kolorem (konwencja w docs/inwentarz-komponentow.md). */ :root { /* ---- Kolory (DS: frame Colors + stany z frame'ów Buttons/Input/Check Box) ---- */ /* Marka */ --kolor-marki: #e30613; /* DS „Red": przyciski primary, akcenty, ikony, aktywne pozycje, checkmark, błędy pól */ --kolor-marki-wcisniety: #b2050f; /* stan pressed elementów czerwonych (przyciski, linki, ikony) */ --kolor-marki-poswiata: rgba(227, 6, 19, 0.24); /* okrągła poświata pod ikonami ilustracyjnymi — poza paletą DS (Page 9) */ /* Tekst i tła */ --kolor-ciemny: #2b303a; /* DS „Black": tekst podstawowy ORAZ ciemne tła; też hover przycisku czerwonego i obrys pola aktywnego */ --kolor-ciemny-wcisniety: #010101; /* stan pressed przycisku czarnego */ --kolor-tekstu: var(--kolor-ciemny); --kolor-tekstu-odwrocony: #ffffff; /* tekst na ciemnych tłach */ --kolor-tekstu-pomocniczy: #6a7a8c; /* placeholdery pól, tekst pomocniczy; w DS też wszystkie stany disabled (tekst, ikony, obrysy secondary) */ --kolor-tla: #ffffff; --kolor-tla-wyroznionego: #f5f7fb; /* jasne tła sekcji, top visuali */ --kolor-tla-nieaktywnego: #e3e8f1; /* DS: tła elementów disabled (przyciski, pola, checkboxy) */ --kolor-linii: #d3d9e5; /* DS: obrysy pól i checkboxów, separatory, nieaktywne kreski karuzeli na jasnym tle */ --kolor-pomocniczy-na-ciemnym: #9ea3ae; /* DS „Text grey dark / stroke input": tekst i obrys pola „Szukaj" oraz obrys pigułki języka w ciemnym headerze (Header Black) — nie w polach formularzy */ /* Stany linków na tłach kolorowych (projekt 2026-09-13, strona „check" w FeuerDS: frame'y 5327:4732 czerwony i 5364:6325 ciemny) — kolory spoza planszy Colors, dopisane do kanonu decyzją użytkownika 2026-09-14; do uzupełnienia na planszy Colors przez projektantkę (rejestr spojnosc-designu.md). */ --kolor-linku-hover-na-czerwonym: #fff0f1; /* hover linku (ikona, nazwa, meta) na tle czerwonym */ --kolor-nieaktywny-na-czerwonym: #bdbdbd; /* link nieaktywny na tle czerwonym */ --kolor-nieaktywny-na-ciemnym: #718096; /* link nieaktywny na tle ciemnym */ --kolor-zdjecia-brak: #d9d9d9; /* placeholder, gdy brak kadru — poza paletą DS */ --kolor-przyciemnienia-zdjecia: rgba(1, 1, 1, 0.35); /* woal na zdjęciach hero/top visuali pod jasnym tekstem — poza paletą DS */ /* Tag / badge (atom) — odmiany semantyczne wg znaczenia (DS: swatche Colors + frame Icons „Badge") */ --kolor-tag-nowosc: #d4f2da; --kolor-tag-wymog-prawny: #ede5cc; --kolor-tag-zmiana-przepisow: #dcefff; /* ---- Typografia (DS: frame Fonts) ---- */ /* Rodzina — wyłącznie Open Sans */ --font-podstawowy: "Open Sans", "Segoe UI", Arial, sans-serif; /* Wagi. Baza wg DS Fonts: Regular 400 / Bold 700 / ExtraBold 800. 300 i 600 nie są w bazowej skali DS, ale komponenty DS ich używają (300 — duże numery, 600 — badge/tagi w kapitalikach). */ --waga-cienka: 300; --waga-zwykla: 400; --waga-polgruba: 600; --waga-gruba: 700; --waga-najgrubsza: 800; /* Skala DS — interlinia zawsze 140% rozmiaru. Zastosowania wg DS Fonts (mobile = odpowiednik na frame'ach mobile): hero home 100/64 (Bold; mobile 54/32), hero podstron 80/48 (ExtraBold; mobile 32/26), H1 48 (mobile 32), H2 Special 36 (mobile 32), H2 32 (mobile 28), H3 26, H4 20 — nagłówki ExtraBold lub Bold; body 16, body small 14 — Regular i Bold. */ --tekst-14: 0.875rem; --interlinia-14: 1.225rem; /* 14/19.6 */ --tekst-16: 1rem; --interlinia-16: 1.4rem; /* 16/22.4 */ --tekst-20: 1.25rem; --interlinia-20: 1.75rem; /* 20/28 — H4 */ --tekst-26: 1.625rem; --interlinia-26: 2.275rem; /* 26/36.4 — H3; hero podstron mobile mały */ --tekst-28: 1.75rem; --interlinia-28: 2.45rem; /* 28/39.2 — H2 mobile */ --tekst-32: 2rem; --interlinia-32: 2.8rem; /* 32/44.8 — H2; H1/H2 Special mobile; hero home/podstron mobile */ --tekst-36: 2.25rem; --interlinia-36: 3.15rem; /* 36/50.4 — H2 Special */ --tekst-48: 3rem; --interlinia-48: 4.2rem; /* 48/67.2 — H1; hero podstron mały */ --tekst-54: 3.375rem; --interlinia-54: 4.725rem; /* 54/75.6 — hero home mobile duży */ --tekst-64: 4rem; --interlinia-64: 5.6rem; /* 64/89.6 — hero home mały */ --tekst-80: 5rem; --interlinia-80: 7rem; /* 80/112 — hero podstron duży */ --tekst-100: 6.25rem; --interlinia-100: 8.75rem; /* 100/140 — hero home duży */ /* Poza skalą DS (Page 9) — trzymają istniejące komponenty; do wygaszenia przy analizie komponentów wg DS. */ --tekst-18: 1.125rem; --interlinia-18: 1.625rem; /* 18/26 — pozycje menu głównego */ --tekst-24: 1.5rem; --interlinia-24: 2.125rem; /* 24/34 — tytuły kart numerycznych */ --tekst-34: 2.125rem; --interlinia-34: 3rem; /* 34/48 — H2 sekcji Page 9 */ --tekst-40: 2.5rem; /* 40 — duże daty/numery */ /* ---- Odstępy — skala ×8 px (×0.5rem); DS Layout guide pokazuje 8–80. 4 px (½ odstępu) i 96 px — poza planszą DS, używane przez komponenty Page 9. ---- */ --odstep-05: 0.25rem; /* 4 px */ --odstep-1: 0.5rem; /* 8 px */ --odstep-2: 1rem; /* 16 px */ --odstep-3: 1.5rem; /* 24 px */ --odstep-4: 2rem; /* 32 px */ --odstep-5: 2.5rem; /* 40 px — odstęp tekst → zdjęcie w treści artykułu (DS Strona branży) */ --odstep-6: 3rem; /* 48 px */ --odstep-8: 4rem; /* 64 px */ --odstep-10: 5rem; /* 80 px */ --odstep-12: 6rem; /* 96 px */ } /* ---- Konteksty tła (decyzja 2026-07-21, task01.20) ---- Element na tle ciemnym/czerwonym dostaje kontekst z klasy tła NA KONTENERZE (sekcja, kafel, pas) — nigdy modyfikatorów per element. Klasa ustawia tło i przemapowuje tokeny wewnątrz; atomy czytają tokeny, więc przełączają się same. Wyjątki stanowe (hover przycisków/linków, wskaźniki, strzałki karuzeli) mają reguły kontekstowe w atomy.css. DS projektuje wygląd na tłach tylko fragmentarycznie — atomów bez projektu nie przełączamy na zapas; braki wychodzą przy testach na atomy.html i wracają do projektantki. */ .tlo-ciemne { background-color: var(--kolor-ciemny); } .tlo-czerwone { background-color: var(--kolor-marki); } /* Tło jasnoszare sekcji wyróżnionych — kontekst jasny: bez przemapowań, atomy wyglądają jak na białym. */ .tlo-wyroznione { background-color: var(--kolor-tla-wyroznionego); } .tlo-ciemne, .tlo-czerwone { --kolor-tekstu: var(--kolor-tekstu-odwrocony); color: var(--kolor-tekstu); } /* Paleta stanów elementów na tłach kolorowych (projekt 2026-09-13, strona „check" FeuerDS; rozciągnięta na linki i strzałki decyzją użytkownika 2026-09-14): spoczynek biały (token --kolor-tekstu), hover jasny, wciśnięty czarny (czerwone tło) / czerwony (ciemne tło), nieaktywny szary. Atomy czytają te zmienne w regułach kontekstowych atomy.css. */ .tlo-ciemne { --stan-hover: var(--kolor-tla-wyroznionego); --stan-wcisniety: var(--kolor-marki); --stan-nieaktywny: var(--kolor-nieaktywny-na-ciemnym); } .tlo-czerwone { --stan-hover: var(--kolor-linku-hover-na-czerwonym); --stan-wcisniety: var(--kolor-ciemny-wcisniety); --stan-nieaktywny: var(--kolor-nieaktywny-na-czerwonym); }