/* ========================================================================== PIZZALOVERS DESIGN TOKENS · v2 "Laboratoriet vid elden" Dark-first shell (start, hubbar, verktyg) + ljus läsyta för långa guider. Endast dessa tokens får användas för färg, typ, avstånd och rörelse. ========================================================================== */ :root{ /* ---- Färg: kol, eld, mjöl ------------------------------------------- */ --c-char-0:#0B0A09; /* djupaste kolet, sidgrund */ --c-char-1:#131110; /* sektionsyta */ --c-char-2:#1C1917; /* upphöjd yta */ --c-char-3:#27231F; /* hover / avdelare på mörk yta */ --c-ash:#948A80; /* dämpad text på mörk yta (5,2:1 på char-2, WCAG AA) */ --c-bone:#B8AEA3; /* sekundär text på mörk yta */ --c-flour:#F3EDE4; /* primär text på mörk yta, ljus läsgrund */ --c-flour-2:#E8E0D4; /* ljus sektionsyta */ --c-flour-3:#D9CFC0; /* linjer på ljus yta */ --c-ink:#171412; /* text på ljus yta */ --c-ink-2:#4A423C; --c-ink-3:#655C55; --c-fire:#E4572E; /* accent för text och ikoner på mörk yta (5,4:1) */ --c-fire-solid:#C6421C; /* fylld yta som bär vit text (5,0:1) */ --c-fire-hot:#FF9F43; /* glöd / highlight / siffror */ --c-fire-deep:#9E2F14; /* tryckt knapp, hover */ --c-cobalt:#3E7CB1; /* data & interaktivt sekundärt (napolitansk mosaik) */ --c-basil:#5C8A4E; /* "ok"-status */ --c-amber:#D3A22B; /* varning */ --c-tomato:#B8321E; /* fel */ /* Semantik — mörkt skal (default) */ --bg:var(--c-char-0); --bg-2:var(--c-char-1); --bg-3:var(--c-char-2); --line:rgba(243,237,228,.10); --line-strong:rgba(243,237,228,.40); --fg:var(--c-flour); --fg-2:var(--c-bone); --fg-3:var(--c-ash); --accent:var(--c-fire); --accent-hot:var(--c-fire-hot); --focus:var(--c-fire-hot); /* ---- Typografi -------------------------------------------------------- */ --f-display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif; --f-body:"Literata",Georgia,"Times New Roman",serif; --f-mono:"Martian Mono","IBM Plex Mono",ui-monospace,Menlo,monospace; /* Skala: 1.25 major third på mobil, öppnar sig på desktop via clamp */ --t-xs:.8rem; --t-sm:.86rem; --t-base:1rem; --t-md:1.125rem; --t-lg:clamp(1.3rem,1.1rem + .9vw,1.7rem); --t-xl:clamp(1.75rem,1.3rem + 2vw,2.6rem); --t-2xl:clamp(2.3rem,1.5rem + 3.8vw,4.2rem); --t-3xl:clamp(3rem,1.6rem + 7vw,7.5rem); --lh-tight:.95; --lh-snug:1.15; --lh-body:1.6; --measure:64ch; /* ---- Rymd ------------------------------------------------------------- */ --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem; --s-6:2rem; --s-7:3rem; --s-8:4rem; --s-9:6rem; --s-10:8rem; --gutter:clamp(1rem,4vw,3rem); --max:1360px; --max-text:760px; /* ---- Form ------------------------------------------------------------- */ --r-1:2px; --r-2:4px; --r-3:8px; /* ---- Rörelse ---------------------------------------------------------- */ --ease-out:cubic-bezier(.16,1,.3,1); --ease-in-out:cubic-bezier(.65,0,.35,1); --d-fast:160ms; --d-base:320ms; --d-slow:700ms; --d-story:800ms; } /* Ljus läsyta — sätts på eller på en sektion */ .is-paper, .paper{ --bg:var(--c-flour); --bg-2:var(--c-flour-2); --bg-3:#FFFFFF; --line:rgba(23,20,18,.12); --line-strong:rgba(23,20,18,.50); --fg:var(--c-ink); --fg-2:var(--c-ink-2); --fg-3:var(--c-ink-3); --accent:var(--c-fire-deep); --accent-hot:var(--c-fire-deep); /* Status/data colours darkened for text on the light surface (all ≥5:1). */ --c-amber:#7A5A0E; --c-basil:#3F6A34; --c-cobalt:#2B5F8C; --focus:var(--c-cobalt); color-scheme:light; } @media (prefers-reduced-motion:reduce){ :root{ --d-fast:0ms; --d-base:0ms; --d-slow:0ms; --d-story:0ms; } }