/* Laag: framework. De rangorde staat in skeleton/templates/page.php: * @layer framework, site, theme, type, item; * Alles wat het framework meestuurt zit in de onderste laag, zodat site-CSS en CMS-opmaak * ervan winnen zonder specificiteits-trucs. Binnen deze laag telt specificiteit gewoon, dus * de onderlinge verhouding tussen framework-bestanden verandert er niet door. * * Een bestand dat deze wikkel MIST staat buiten elke laag en wint daarmee van ALLES — * ook van het CMS. `tests/Framework/CodeStyle/ModuleCssIsLayeredTest.php` bewaakt dat. */ @layer framework { /* * 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-*). * * De sites zijn licht. `color-scheme: light` staat er bewust: het vertelt de browser dat hij * z'n eigen onderdelen (scrollbars, form-controls, autofill) óók licht moet tekenen. Zonder die * declaratie tekent een bezoeker met een donker systeem donkere invoervelden op een witte * pagina. * * Hier stond tot 12-08-2026 een donker schema via `light-dark()`, met een toggle op * ``. Dat werkte niet en had nog nooit gewerkt: `SiteTokens` pint * `color-scheme: light` op `:root`, en dan kiest `light-dark()` altijd de eerste waarde. De * toggle zelf (`public/modules/color-scheme.js`) werd door geen enkele template geladen. * Erger nog, `light-dark()` is Safari 17.5 terwijl onze ondergrens 16.4 is — zie * `docs/BROWSER-BASELINE.md`. Een custom property met een onbekende functie is ongeldig bij * gebruik, en dan valt de kleur terug op geërfd; een `var(--x, fallback)` vangt dat NIET op, * want de fallback springt alleen bij een ontbrekende property, niet bij een ongeldige waarde. * * 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; /* 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 */ --color-fg: #1a1a1a; --color-fg-muted: #555; --color-bg: #fff; --color-bg-soft: #f7f7f8; --color-bg-elev: #fff; --color-border: rgba(0,0,0,.12); --color-border-strong: rgba(0,0,0,.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: #c0392b; --color-success: #0a6e3a; --color-link: #06f; /* Radii */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; /* Shadows */ --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; } /* Motion-reduction — versoepelde variant. */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 80ms; --dur-med: 120ms; --dur-slow: 160ms; } html { scroll-behavior: auto; } } /* Dunne, thema-meekleurende scrollbar. De log grijze UA-default kleurt niet mee met het thema; hier is de thumb een subtiele afgeleide van de voorgrondkleur, dus 'ie adapteert automatisch licht/donker (via `--color-fg`) en per-site brand (die kan `--color-fg` overschrijven). `scrollbar-width`/`scrollbar-color` zijn de standaard- props (Chrome 121+, Firefox, Safari 18.2+); overschrijfbaar per site via `--scrollbar-*`. */ html { scrollbar-width: var(--scrollbar-width, thin); scrollbar-color: var(--scrollbar-color, color-mix(in srgb, var(--color-fg) 32%, transparent) transparent); } /* Sticky footer (framework-basis): de pagina vult minstens de vensterhoogte en de *
groeit mee, zodat de paginavoet altijd onderaan blijft — ook op korte * pagina's. Alleen layout; kleuren/typografie blijven van de design-laag. */ body { min-height: 100dvh; display: flex; flex-direction: column; } body > main { flex: 1 0 auto; } }