/* ========================================================================= kamilajanula.pl — TOKENY PROJEKTOWE System „Trzy podłoża" (Papier · Płótno · Skóra) · wersja 1.0 Źródło prawdy: design-system.md — ten plik jest jego wykonawczą kopią. Kolejność: prymitywy → tokeny semantyczne → typografia → przestrzeń → promienie → cienie → warstwy → ruch → tryb atrament → tryby użytkownika. ========================================================================= */ /* ------------------------------------------------------------------------- 1. PRYMITYWY — surowe wartości pigmentów. Nie używać bezpośrednio w komponentach; komponenty czytają wyłącznie tokeny semantyczne (§2). ------------------------------------------------------------------------- */ :root { /* 1.1 Skala „papier" — podłoża jasne -------------------------------- */ --papier-000: #FAF8F3; /* karty podniesione, pola formularza */ --papier-100: #F4F0E9; /* GŁÓWNE tło strony — papier czerpany */ --papier-200: #EDE8DE; /* sekcje naprzemienne, tło filtrów, hover */ --papier-300: #E3DCCD; /* zagłębienia, pasek postępu, placeholdery */ --papier-400: #D8D0C1; /* hairline / obramowania (nigdy dla tekstu) */ --papier-500: #BFB5A3; /* obramowanie mocne, disabled, znaczniki */ /* 1.2 Skala „atrament" — podłoża ciemne ----------------------------- */ --atrament-950: #0A0908; /* zagłębienia w ciemnym, tło lightboxa */ --atrament-900: #12100E; /* GŁÓWNE tło sekcji Tatuaż i stopki */ --atrament-800: #1B1815; /* karty w ciemnym, panel rezerwacji */ --atrament-700: #332E28; /* hairline na ciemnym */ --atrament-600: #464038; /* obramowanie mocne na ciemnym */ --atrament-500: #5C544A; /* disabled na ciemnym */ /* 1.3 Tekst --------------------------------------------------------- */ --grafit-900: #171310; /* na papier-100 → 16.26:1 nagłówki, treść */ --grafit-700: #4E483F; /* na papier-100 → 7.96:1 tekst drugorzędny */ --grafit-500: #6B625A; /* na papier-100 → 5.25:1 metadane, podpisy */ --kosc-100: #EFEBE3; /* na atrament-900 → 15.97:1 nagłówki ciemne */ --kosc-300: #C4BCB0; /* na atrament-900 → 10.10:1 tekst na ciemnym */ --kosc-500: #9A9186; /* na atrament-800 → 5.70:1 metadane ciemne */ /* UWAGA: --grafit-500 na --papier-300 = 4.37:1 → wyłącznie tekst ≥ 18.66px bold / ≥ 24px regular albo elementy nietekstowe. Dla drobnego tekstu na papier-300 stosować --grafit-700. */ /* 1.4 Akcent — cynober / czerwień żelazowa --------------------------- */ --cynober-700: #7A2618; /* 8.73:1 na papier-100 · :active przycisku */ --cynober-600: #8F2D1F; /* 7.21:1 na papier-100 · :hover przycisku */ --cynober-500: #B03826; /* 5.37:1 na papier-100 · AKCENT TRYB PAPIER */ --cynober-400: #E05B3F; /* 5.19:1 na atrament-900 · AKCENT ATRAMENT */ --cynober-300: #F0705A; /* 6.48:1 na atrament-900 · :hover na ciemnym */ --cynober-050: #F7E7E1; /* wash, tło podświetlenia */ /* 1.5 Pigmenty kategorii ------------------------------------------- */ --ultramaryna-600: #38477F; /* Akwarela · jasny · 7.78:1 */ --ultramaryna-300: #8B99D6; /* Akwarela · ciemny · 6.89:1 */ --sjena-600: #8A4620; /* Olej · jasny · 6.21:1 */ --sjena-300: #D08A5A; /* Olej · ciemny · 6.75:1 */ --ftal-600: #17594A; /* Akryl · jasny · 7.21:1 */ --ftal-300: #5FB49C; /* Akryl · ciemny · 7.68:1 */ /* Tatuaż · jasny = --atrament-900 (16.7:1) · ciemny = --kosc-100 */ /* 1.6 Tony skóry — WYŁĄCZNIE placeholdery tatuaży -------------------- */ --skora-100: #E8D5C2; --skora-200: #D9BFA6; --skora-300: #C39C7C; --skora-400: #8E6748; /* tylko jako tło pod czarną linią */ /* 1.7 Stany systemowe ----------------------------------------------- */ --focus-papier: #38477F; /* ring focus, tryb papier · 7.78:1 */ --focus-atrament: #8B99D6; /* ring focus, tryb atrament · 6.89:1 */ --sukces: #17594A; /* potwierdzenie wysyłki formularza */ --blad: #A02617; /* walidacja · 5.9:1 na papier-000 */ } /* ------------------------------------------------------------------------- 2. TOKENY SEMANTYCZNE — jedyna warstwa, z której korzystają komponenty. Podmiana tych wartości = zmiana reżimu (papier ↔ atrament). ------------------------------------------------------------------------- */ :root, .tryb-papier { --tlo: var(--papier-100); --tlo-podniesione: var(--papier-000); --tlo-zaglebione: var(--papier-300); --tlo-naprzemienne:var(--papier-200); --tekst: var(--grafit-900); /* nagłówki, tekst główny */ --tekst-2: var(--grafit-700); /* leady, tekst drugorzędny */ --tekst-3: var(--grafit-500); /* metadane, podpisy, labelki */ --linia: var(--papier-400); /* hairline 1px */ --linia-mocna: var(--papier-500); /* obramowanie mocne, kreska sekcji */ --akcent: var(--cynober-500); --akcent-hover: var(--cynober-600); --akcent-aktyw: var(--cynober-700); --akcent-wash: var(--cynober-050); --akcent-tekst: var(--papier-100); /* tekst NA wypełnieniu akcentu */ --focus: var(--focus-papier); /* Pigmenty kategorii w kontekście — komponent filtra czyta te aliasy */ --pigment-akwarela: var(--ultramaryna-600); --pigment-olej: var(--sjena-600); --pigment-akryl: var(--ftal-600); --pigment-tatuaz: var(--atrament-900); --ziarno-krycie: 0.035; --ziarno-blend: multiply; color-scheme: light; } /* ------------------------------------------------------------------------- 3. TYPOGRAFIA ------------------------------------------------------------------------- */ :root { /* 3.1 Rodziny ------------------------------------------------------- */ --font-display: 'Fraunces', 'Georgia', 'Times New Roman', serif; --font-ui: 'Archivo', ui-sans-serif, system-ui, 'Helvetica Neue', Arial, sans-serif; --font-mono: ui-monospace, 'SFMono-Regular', 'Menlo', monospace; /* 3.2 Osie variable — gotowe zestawy ------------------------------- */ --vf-hero: 'opsz' 144, 'SOFT' 40, 'WONK' 1; /* monument w hero */ --vf-tytul: 'opsz' 72, 'SOFT' 30, 'WONK' 1; /* nagłówki sekcji */ --vf-tekst: 'opsz' 14, 'SOFT' 20, 'WONK' 0; /* tekst bieżący serif */ --vf-cytat: 'opsz' 48, 'SOFT' 70, 'WONK' 1; /* cytat w Atelier */ /* 3.3 Skala — fluid clamp ------------------------------------------ */ --fs-monument: clamp(4rem, 17vw, 15.5rem); /* Fraunces 300 */ --fs-d1: clamp(2.75rem, 7vw, 6.5rem); /* Fraunces 400 */ --fs-d2: clamp(2rem, 4.5vw, 3.75rem); /* Fraunces 400 */ --fs-d3: clamp(1.5rem, 2.6vw, 2.25rem); /* Fraunces 400 */ --fs-lead: clamp(1.125rem, 1.35vw, 1.4375rem); /* Archivo 400 */ --fs-body: clamp(1rem, 1.05vw, 1.125rem); /* Archivo 400 */ --fs-sm: 0.9375rem; /* 15px */ --fs-xs: 0.8125rem; /* 13px — minimum */ --fs-label: 0.75rem; /* 12px UPPERCASE */ /* 3.4 Grubości ------------------------------------------------------ */ --w-light: 300; --w-regular: 400; --w-medium: 500; --w-semi: 600; --w-bold: 700; /* 3.5 Interlinia i tracking ---------------------------------------- */ --lh-monument: 0.82; --ls-monument: -0.045em; --lh-display: 0.94; --ls-display: -0.028em; --lh-d3: 1.1; --ls-d3: -0.015em; --lh-lead: 1.5; --ls-lead: -0.006em; --lh-body: 1.65; --ls-body: 0; --lh-label: 1.2; --ls-label: 0.14em; --ls-wersaliki: 0.06em; /* nagłówki wersalikowe w sekcji Tatuaż */ /* 3.6 Miary --------------------------------------------------------- */ --miara-tekst: 66ch; --miara-lead: 46ch; } /* ------------------------------------------------------------------------- 4. PRZESTRZEŃ I SIATKA ------------------------------------------------------------------------- */ :root { /* 4.1 Skala odstępów — baza 4px ------------------------------------ */ --s-1: 0.25rem; /* 4px */ --s-2: 0.5rem; /* 8px */ --s-3: 0.75rem; /* 12px */ --s-4: 1rem; /* 16px */ --s-5: 1.5rem; /* 24px */ --s-6: 2rem; /* 32px */ --s-7: 3rem; /* 48px */ --s-8: 4rem; /* 64px */ --s-9: 6rem; /* 96px */ --s-10: 8rem; /* 128px */ --s-11: 12rem; /* 192px */ --sekcja-y: clamp(4.5rem, 11vw, 11rem); --sekcja-y-duza: clamp(6rem, 16vw, 16rem); --stack: clamp(1.25rem, 2.4vw, 2.5rem); /* 4.2 Siatka i kontener -------------------------------------------- */ --kolumny: 4; /* mobile first */ --rynna: clamp(1rem, 2.2vw, 2rem); --margines: clamp(1.25rem, 5vw, 5rem); --maks-szer: 1680px; --maks-tekst: 78rem; /* 4.3 Promienie — „papier nie ma zaokrągleń" ----------------------- */ --r-0: 0; /* domyślnie WSZYSTKO */ --r-1: 2px; /* badge, chip pigmentu */ --r-pigulka: 999px; /* WYŁĄCZNIE filtry-chipy i przycisk „do góry" */ /* 4.4 Cienie — farba nie ma cieni, ma wilgoć ----------------------- */ --cien-0: none; --cien-1: 0 1px 2px rgba(23, 19, 16, .05), 0 8px 24px -12px rgba(23, 19, 16, .10); --cien-2: 0 24px 64px -24px rgba(23, 19, 16, .22); --cien-3: 0 40px 120px -40px rgba(10, 9, 8, .70); --cien-wewn: inset 0 0 0 1px var(--linia); /* 4.5 Punkty łamania (do @media / container queries w JS) ---------- */ --bp-sm: 30em; /* 480px */ --bp-md: 48em; /* 768px */ --bp-lg: 64em; /* 1024px */ --bp-xl: 90em; /* 1440px */ --bp-xxl: 120em; /* 1920px */ /* 4.6 Warstwy ------------------------------------------------------- */ --z-tlo: 0; --z-tresc: 1; --z-sticky: 10; --z-nav: 100; --z-menu: 200; --z-lightbox: 900; --z-skiplink: 1000; /* 4.7 Ruch ---------------------------------------------------------- */ --czas-1: 160ms; /* mikro: stan przycisku */ --czas-2: 320ms; /* standard: filtr, hover kafla */ --czas-3: 700ms; /* rozlanie: scroll-reveal, przejście tła */ --czas-4: 1100ms; /* monumentalne: wejście hero */ --ease-tusz: cubic-bezier(.16, 1, .3, 1); --ease-plyn: cubic-bezier(.65, 0, .35, 1); --ease-ostry: cubic-bezier(.4, 0, .2, 1); /* 4.8 Proporcje kafli galerii -------------------------------------- */ --ar-portret: 2 / 3; --ar-kwadrat: 1 / 1; --ar-klasyk: 3 / 4; --ar-plakat: 4 / 5; } /* Siatka responsywna — liczba kolumn wg design-system.md §4.2 */ @media (min-width: 48em) { :root { --kolumny: 8; } } @media (min-width: 64em) { :root { --kolumny: 12; } } /* ------------------------------------------------------------------------- 5. TRYB ATRAMENT — inwersja per-sekcja (klasa na
, nie globalnie) Sekcja Tatuaż · stopka · lightbox. ------------------------------------------------------------------------- */ .tryb-atrament { --tlo: var(--atrament-900); --tlo-podniesione: var(--atrament-800); --tlo-zaglebione: var(--atrament-950); --tlo-naprzemienne:var(--atrament-800); --tekst: var(--kosc-100); --tekst-2: var(--kosc-300); --tekst-3: var(--kosc-500); --linia: var(--atrament-700); --linia-mocna: var(--atrament-600); --akcent: var(--cynober-400); --akcent-hover: var(--cynober-300); --akcent-aktyw: var(--cynober-400); --akcent-wash: rgba(224, 91, 63, .12); --akcent-tekst: var(--atrament-900); /* tekst NA akcencie */ --focus: var(--focus-atrament); --pigment-akwarela: var(--ultramaryna-300); --pigment-olej: var(--sjena-300); --pigment-akryl: var(--ftal-300); --pigment-tatuaz: var(--kosc-100); --ziarno-krycie: 0.055; --ziarno-blend: screen; --cien-1: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px -12px rgba(0, 0, 0, .55); --cien-2: 0 24px 64px -24px rgba(0, 0, 0, .70); --cien-wewn: inset 0 0 0 1px var(--linia); color-scheme: dark; background-color: var(--tlo); color: var(--tekst); } /* ------------------------------------------------------------------------- 6. PREFERENCJE UŻYTKOWNIKA ------------------------------------------------------------------------- */ /* 6.1 Ograniczony ruch — efekty znikają, treść zostaje natychmiast widoczna */ @media (prefers-reduced-motion: reduce) { :root { --czas-1: 1ms; --czas-2: 1ms; --czas-3: 1ms; --czas-4: 1ms; } } /* 6.2 Podwyższony kontrast — hairline'y twardnieją, akcent ciemnieje */ @media (prefers-contrast: more) { :root, .tryb-papier { --linia: var(--papier-500); --linia-mocna: var(--grafit-500); --tekst-3: var(--grafit-700); --akcent: var(--cynober-600); } .tryb-atrament { --linia: var(--atrament-600); --linia-mocna: var(--atrament-500); --tekst-3: var(--kosc-300); --akcent: var(--cynober-300); } } /* 6.3 Brak wsparcia dla color-mix() — placeholdery dostają płaski fallback */ @supports not (color: color-mix(in oklab, red 50%, transparent)) { :root { --plama-fallback: var(--papier-200); } }