/* ============================================================ KAKAWA — tokeny projektowe (jedno źródło prawdy) Architektura: power-design-web (12-stopniowa skala, OKLCH) Zasady: power-design (8pt grid, skala 1.333, jeden akcent) Orion · 24.07.2026 · scaffold v0.1 ============================================================ */ :root { /* --- SKALA POWIERZCHNI (kroki 1-3: tła) --- */ --surface-0: oklch(0.16 0.015 65); /* #14100C espresso — dominanta */ --surface-1: oklch(0.20 0.018 60); /* #1D1712 kakao głębokie — karty */ --surface-2: oklch(0.25 0.020 58); /* #2A211A łuska — hover */ /* --- TEKST (kroki 11-12) --- */ --text-hi: oklch(0.94 0.020 85); /* #F3EBDD kość słoniowa */ --text-mid: oklch(0.78 0.025 80); /* #C7B9A6 przygaszony */ --text-low: oklch(0.58 0.030 70); /* #8A7A66 szarobrąz łuski */ /* --- AKCENT (krok 9: wyłącznie akcja + 1 słowo-klucz/sekcję) --- */ --accent: oklch(0.62 0.115 55); /* #C97B3D bursztynowa miedź */ --accent-hi: oklch(0.72 0.120 60); /* #E39A55 rozżarzona — hover */ --accent-ink:#160D06; /* tekst NA akcencie */ /* --- WSPIERAJĄCE (poza UI) --- */ --jungle: oklch(0.32 0.045 155); /* #2E4034 zieleń — tylko film rozdz.1 */ --line: oklch(0.94 0.02 85 / .12); /* hairline na ciemnym (rozjaśnione 24.07) */ /* --- JASNY KONTRAPUNKT (korekta Roberta 24.07: „jaśniejsze akcenty") --- */ --surface-light: oklch(0.93 0.022 85); /* pas kremowy — sekcje-kontrapunkty */ --ink-on-light: oklch(0.20 0.018 60); /* tekst na jasnym */ --ink-mid-light: oklch(0.42 0.025 65); /* tekst drugorzędny na jasnym */ /* --- TYPOGRAFIA (skala 1.333, baza 18) --- */ --font-display: 'Fraunces', Georgia, serif; --font-body: 'Instrument Sans', system-ui, sans-serif; --fs-0: 14px; /* caption / eyebrow */ --fs-1: 18px; /* body */ --fs-2: 24px; /* lead */ --fs-3: 32px; /* h3 */ --fs-4: 43px; /* h2 */ --fs-5: 57px; /* h1 sekcji */ --fs-6: 76px; /* hero display */ --lh-body: 1.55; --lh-display: 1.08; /* --- SPACING (siatka 8pt — Never 13. Never 27.) --- */ --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-5: 48px; --s-6: 64px; --s-7: 96px; --s-8: 128px; /* --- MOTION (intencje wg Material 3 / gsap.defaults) --- */ --t-enter: 150ms; /* wejścia drobne */ --t-standard: 220ms; /* hover, przejścia */ --t-emphasized: 500ms; /* momenty hero */ --ease-out: cubic-bezier(.22,.61,.36,1); /* --- RADIUSY --- */ --r-s: 10px; --r-m: 16px; --r-pill: 999px; } /* Tryb „wieczór ceremonii" — podmiana skali klasą na (zakładka /ceremonia) */ .ceremonia-noc { --surface-0: oklch(0.11 0.012 60); --surface-1: oklch(0.14 0.015 58); --text-hi: oklch(0.90 0.022 82); --accent: oklch(0.58 0.105 50); } /* ============ BAZA ============ */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{ background:var(--surface-0); color:var(--text-hi); font-family:var(--font-body); font-size:var(--fs-1); line-height:var(--lh-body); -webkit-font-smoothing:antialiased; } h1,h2,h3{font-family:var(--font-display);font-weight:400;line-height:var(--lh-display)} img{max-width:100%;display:block} a{color:inherit} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px} ::selection{background:var(--accent);color:var(--accent-ink)} @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important} }