/* * Design tokens — the single source of truth for the public site. * * TWO LAYERS, and the split matters: * * Laag 1 het palet: ruwe kleuren. Alleen dit bestand mag ze lezen. * Laag 2 de rollen: wat een kleur DOET. public.css leest uitsluitend deze. * * Daardoor is een dark mode later een herdefinitie van laag 2 — één blok in dit * bestand — in plaats van opnieuw honderd declaraties in public.css langs. * Dat is de hele reden voor de tussenlaag; light mode is nu aan de beurt. * * ROLVERDELING VAN DE KLEUREN * groen de identiteit: donkere secties, koppen, prijsbedragen * blauw de actie: knoppen en links * oranje de uitschieter: één opvallende knop, badges, het handschrift * * CONTRASTREGEL — lees dit voordat je een kleur op tekst zet: * --brand-bright is een VLAKKENKLEUR. Als tekst op wit haalt hij 2.80:1 en * faalt hij dus zelfs voor grote tekst. Tekst in het groen gaat op --brand. * --accent (oranje) draagt DONKERE tekst, geen witte: wit haalt er 3.50:1, * --accent-text haalt 4.89:1. * Nagerekend en in orde: ink op wit 17.13 · ink-muted op wit 7.80 · * brand als tekst 5.43 · wit op action 5.07 · wit op brand-surface 4.78 · * accent-text op accent 4.89 · on-inverse op inverse 13.16 · op raised 9.53 · * on-inverse-muted 9.05 / 6.55. */ :root { /* ======================================================= LAAG 1 — palet == */ /* Groen — de identiteit. Voorheen dofden drie bijna-gelijke groenen door de codebase; alles groen komt hiervandaan. */ --g-900: #072118; /* donkere secties, footer, hero */ --g-800: #0A3D29; /* verhoogde vlakken op donker: kaarten, badges */ --g-700: #0A7A3D; /* het leesbare groen: 5.43:1 op wit */ --g-600: #0B8443; /* groen vlak met witte tekst: 4.78:1 */ --g-400: #33AF6D; /* helder groen — vlak, nooit tekst */ --g-100: #F1F7F3; /* zacht groen vlak */ /* Blauw — de actie. Het blauw haalt 5.07:1 met wit; het groen dat hier eerst zat haalde 4.41:1 en faalde dus. */ --b-600: #0072BD; --b-800: #014C7D; /* Oranje — de uitschieter. */ --o-600: #E85D04; --o-300: #FF9E4F; /* de lichte variant, voor accenten op donker */ /* Neutraal */ --n-0: #FFFFFF; --n-900: #0E1F16; --n-700: #42574A; --n-500: #6B7F73; --n-100: #E4EDE7; --rood: #E23A2E; /* Statuslabels (betaling): licht vlak met donkere tekst, elk paar ≥ 7:1. */ --st-neutral-100: #E9ECEF; --st-warn-100: #FFF3CD; --st-warn-900: #856404; --st-ok-100: #D4EDDA; --st-ok-900: #155724; --st-err-100: #F8D7DA; --st-err-900: #721C24; --st-info-100: #CCE5FF; --st-info-900: #004085; --st-done-100: #E2D9F3; --st-done-900: #4A235A; /* ======================================================= LAAG 2 — rollen == Dit is wat public.css leest. Verwijs hier nooit naar laag 1 buiten dit blok, en zet hier geen kale hex neer. */ /* Oppervlakken */ --surface: var(--n-0); --surface-soft: var(--g-100); --surface-inverse: var(--g-900); --surface-inverse-raised: var(--g-800); /* Tekst */ --text: var(--n-900); --text-muted: var(--n-700); --text-subtle: var(--n-500); --text-on-inverse: #CFE9DA; --text-on-inverse-muted: #9DC7AE; --text-on-inverse-strong: var(--n-0); /* koppen op donker */ --text-on-media: var(--n-0); /* tekst boven een foto, met scrim eronder */ --text-on-action: var(--n-0); /* Actie — blauw */ --action: var(--b-600); --action-hover: var(--b-800); /* Identiteit — groen */ --brand: var(--g-700); /* groen als tekst */ --brand-hover: var(--g-800); --brand-surface: var(--g-600); /* groen vlak, witte tekst erop */ --text-on-brand: var(--n-0); /* 4.78:1 op --brand-surface */ --brand-bright: var(--g-400); /* vlak/accentlijn — NOOIT tekst */ /* Uitschieter — oranje */ --accent: var(--o-600); --accent-light: var(--o-300); /* op donker */ --accent-text: var(--n-900); /* de tekstkleur bovenop --accent */ /* Lijnen */ --border: var(--n-100); --border-on-inverse: rgb(207 233 218 / 0.22); /* Focus. Oranje is op elk oppervlak van deze site zichtbaar. */ --focus: var(--o-600); /* Semantisch. --live is een vlakkenkleur: als tekst op wit haalt hij 4.30:1 en faalt hij. Voor tekst is --live-text er (5.75:1). */ --live: var(--rood); --live-text: #C4271C; /* Status van een betaling */ --status-neutral-bg: var(--st-neutral-100); --status-neutral-text: var(--n-700); --status-open-bg: var(--st-warn-100); --status-open-text: var(--st-warn-900); --status-paid-bg: var(--st-ok-100); --status-paid-text: var(--st-ok-900); --status-failed-bg: var(--st-err-100); --status-failed-text: var(--st-err-900); --status-progress-bg: var(--st-info-100); --status-progress-text: var(--st-info-900); --status-refunded-bg: var(--st-done-100); --status-refunded-text: var(--st-done-900); /* ============================================================== Type ==== */ /* Fraunces in de STRAKKE stand. De schreef mocht blijven, de hand-cut stand niet: SOFT 60 / WONK 1 gaven de koppen een uitgesneden postergevoel, en dat was wat oubollig las — niet de schreef zelf. opsz staat hier bewust NIET in: dit token landt ook op kleine tekst (tegeltitels, tabelkoppen, het stapnummer), en zodra font-variation-settings opsz noemt vervalt font-optical-sizing: auto. Zonder opsz kiest de browser per grootte de juiste optische variant. */ --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --display-axes: 'SOFT' 0, 'WONK' 0; --font-body: 'Outfit', ui-sans-serif, system-ui, sans-serif; /* Handschrift-accent. Alleen voor korte kreten van een paar woorden — nooit voor lopende tekst. */ --font-hand: 'Caveat', 'Bradley Hand', cursive; /* De bovengrens beweegt het meest: daar zitten de grote koppen. Mobiel verandert er nauwelijks iets. */ --fs-mega: clamp(3rem, 11vw, 9rem); --fs-h1: clamp(2.5rem, 7vw, 5rem); --fs-h2: clamp(2rem, 4.6vw, 3.25rem); --fs-h3: clamp(1.2rem, 2vw, 1.5rem); /* Het prijsbedrag staat NAAST een titel in een kaart die tot 12rem smal mag worden, dus het kan de vergrote --fs-h2 niet lenen: bij 52px liep het uit het vak. Dit is de maat die --fs-h2 had voordat de koppen groter werden. */ --fs-bedrag: clamp(1.65rem, 3.4vw, 2.5rem); --fs-lead: clamp(1.0625rem, 1.6vw, 1.3125rem); --fs-body: 1.0625rem; --fs-small: 0.9375rem; --fs-label: 0.75rem; --lh-tight: 1.0; /* op --fs-mega: bij 1.02 gaat de hero rafelen */ --lh-head: 1.12; --lh-body: 1.65; /* Space — a 4px-rooted scale */ --sp-3xs: 0.25rem; --sp-2xs: 0.5rem; --sp-xs: 0.75rem; --sp-s: 1rem; --sp-m: 1.5rem; --sp-l: 2.5rem; --sp-xl: 4rem; --sp-2xl: 6rem; --sp-3xl: 9rem; /* ============================================================= Shape ==== */ /* Knoppen rond, plaatjes strak — dat is het Sonos-onderscheid, en daarom zijn kaart en media hier gesplitst in plaats van één --radius-l. */ --radius-card: 28px; --radius-media: 6px; --radius-s: 8px; --radius-pill: 999px; /* Depth — getint in het groen, zodat schaduwen in het palet blijven */ --shadow-s: 0 1px 2px rgb(7 33 24 / 0.06); --shadow-m: 0 1px 2px rgb(7 33 24 / 0.05), 0 8px 24px rgb(7 33 24 / 0.08); --shadow-l: 0 2px 4px rgb(7 33 24 / 0.06), 0 24px 56px rgb(7 33 24 / 0.16); --wrap: 72rem; --wrap-narrow: 46rem; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out-back: cubic-bezier(0.34, 1.4, 0.64, 1); }