/* * variables.css — framework-level design tokens. * * Laad VOOR website.css zodat site-CSS de standaard tokens kan overschrijven. * Modules consumen deze tokens rechtstreeks via var(--color-*). * * Color-scheme heeft 3 modi: * - default: volg `prefers-color-scheme` van het systeem * - ``: forceer licht * - ``: forceer donker * * De manual override wordt door de toggle-knop in de site-header gezet en * via `localStorage` gepersisteerd. Bij `auto` blijft het attribuut weg. * * Viewport-breekpunten — gebruik ALLEEN deze waarden in @media-regels: * sm: 48rem ( 768px) — telefoon / portrait tablet * md: 64rem (1024px) — tablet / laptop * Component-breedte-afhankelijke layouts → @container, niet @media. */ :root { color-scheme: light dark; /* Spacing — fluid via clamp om mobiel + desktop te dekken zonder media queries */ --space-1: clamp(0.25rem, 0.5vw, 0.4rem); --space-2: clamp(0.5rem, 1vw, 0.75rem); --space-3: clamp(0.75rem, 1.5vw, 1rem); --space-4: clamp(1rem, 2vw, 1.5rem); --space-5: clamp(1.5rem, 3vw, 2.5rem); --space-6: clamp(2rem, 5vw, 4rem); --space-7: clamp(3rem, 7vw, 6rem); /* Layout */ --content-max: 76rem; --gutter: var(--space-4); /* Typography */ --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-display: var(--font-body); --font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, monospace; --line-base: 1.6; --line-tight: 1.2; --fs-body: 1rem; --fs-intro: clamp(1.05rem, 1.2vw, 1.2rem); --fs-h1: clamp(2rem, 4vw, 3.25rem); --fs-h2: clamp(1.5rem, 3vw, 2.25rem); --fs-h3: clamp(1.2rem, 2vw, 1.5rem); --fs-tagline: 0.9rem; /* Colors — light-dark() zodat één definitie beide schemes dekt (Safari 17.5+/Chrome 123+/FF 127+). Shadows werken NIET met light-dark() (komma's in box-shadow zijn ambigu); die staan apart in de @media- en [data-color-scheme]-blokken hieronder. */ --color-fg: light-dark(#1a1a1a, #ececec); --color-fg-muted: light-dark(#555, #9aa0a6); --color-bg: light-dark(#fff, #0f1115); --color-bg-soft: light-dark(#f7f7f8, #161a20); --color-bg-elev: light-dark(#fff, #1e232b); --color-border: light-dark(rgba(0,0,0,.12), rgba(255,255,255,.12)); --color-border-strong: light-dark(rgba(0,0,0,.22), rgba(255,255,255,.22)); /* Primary — neutrale standaard; sites overschrijven met hun brand-kleur */ --color-primary: #2563eb; --color-primary-fg: #fff; --color-primary-dk: color-mix(in srgb, var(--color-primary) 85%, black); /* Semantische status-kleuren */ --color-danger: light-dark(#c0392b, #f87171); --color-success: light-dark(#0a6e3a, #4ade80); --color-link: light-dark(#06f, #82b4ff); /* Radii */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; /* Shadows — light defaults; dark override in @media + [data-color-scheme] hieronder */ --shadow-1: 0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.05); --shadow-2: 0 2px 4px rgba(0,0,0,.06), 0 12px 32px rgba(0,0,0,.08); /* Motion — global timing. Respecteer `prefers-reduced-motion`. */ --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); --dur-fast: 120ms; --dur-med: 220ms; --dur-slow: 420ms; } /* Shadow-dark overrides — alleen shadows, kleur-tokens doen het via light-dark(). */ @media (prefers-color-scheme: dark) { :root { --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.5); --shadow-2: 0 2px 4px rgba(0,0,0,.5), 0 12px 32px rgba(0,0,0,.6); } } /* Manual overrides — winnen van system-preference. color-scheme forceren zodat UA scrollbar/input ook meedoet. Shadows apart omdat light-dark() niet werkt voor multi-value box-shadow. */ :root[data-color-scheme="light"] { color-scheme: light; --shadow-1: 0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.05); --shadow-2: 0 2px 4px rgba(0,0,0,.06), 0 12px 32px rgba(0,0,0,.08); } :root[data-color-scheme="dark"] { color-scheme: dark; --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.5); --shadow-2: 0 2px 4px rgba(0,0,0,.5), 0 12px 32px rgba(0,0,0,.6); } /* Motion-reduction — versoepelde variant. */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 80ms; --dur-med: 120ms; --dur-slow: 160ms; } html { scroll-behavior: auto; } }