/* ============================================================
Design Tokens — Schoolinformatie Vakmanstad
============================================================
Eén bron van waarheid voor kleur, typografie, ruimte, motion.
Gebaseerd op het Rotterdam Vakmanstad Design System
(Huisstijlhandboek 2.0). Elke pagina linkt fonts.css + dit
bestand via .
Gouden regels van het merk:
- ÉÉN accentkleur + zwart/wit — nooit twee accenten samen.
Het accent is themebaar via [data-accent="…"]; de app-chrome is sinds
de fase-3-ronde inkt (zwart-wit), zodat kleur alleen nog een leerlijn
of een status draagt.
- Geen gradients, geen emoji; warmte komt uit kleur + foto's.
- Koppen & controls: Quicksand · lopende tekst: Yrsa (serif)
· labels/eyebrows: Oswald (uppercase).
============================================================ */
:root {
/* --- Kernpalet (exacte hex uit het Huisstijlhandboek) --- */
--vms-green: #35d864;
--vms-blue: #1e96fc;
--vms-yellow: #ffdd38;
--vms-red: #f5420a;
--vms-purple: #9b18db;
--vms-grey: #dcdcdc; /* steunkleur */
/* Donkere stap (hover / press / gekleurde tekst op licht) */
--vms-green-deep: #25a94b;
--vms-blue-deep: #0f77d6;
--vms-yellow-deep: #e9c200;
--vms-red-deep: #cc3608;
--vms-purple-deep: #7a11ae;
/* AA-inkt voor gekleurde tekst op wit/zacht. De heldere merkkleur blijft
beschikbaar voor stippen en randen; tekst gebruikt deze donkerdere stap. */
--vms-green-ink: #146b2f;
--vms-blue-ink: #0b64b8;
--vms-yellow-ink: #756200;
--vms-red-ink: #b02c06;
--vms-purple-ink: #7a11ae;
/* AA-vullingen voor controls met tekst. Helder groen/geel/grijs houden hun
donkere tekst; blauw/rood/paars krijgen een donkerder merkvlak met wit. */
--vms-green-fill: #35d864;
--vms-green-fill-hover: #2abb53;
--vms-blue-fill: #0b64b8;
--vms-blue-fill-hover: #084f91;
--vms-yellow-fill: #ffdd38;
--vms-yellow-fill-hover: #e9c200;
--vms-red-fill: #b02c06;
--vms-red-fill-hover: #8f2304;
--vms-purple-fill: #7a11ae;
--vms-purple-fill-hover: #610c8c;
--vms-grey-fill: #dcdcdc;
--vms-grey-fill-hover: #b5b5b2;
/* Zachte tint (wassen, hover-vlakken, zones) */
--vms-green-soft: #e5f9ec;
--vms-blue-soft: #e4f2ff;
--vms-yellow-soft: #fff8dc;
--vms-red-soft: #fde6dd;
--vms-purple-soft: #f2e2fb;
--vms-grey-soft: #f4f4f4;
/* Inkt & papier */
--vms-black: #1d1d1b;
--vms-white: #ffffff;
/* Neutrale ramp (warm-grijs uit de steunkleur) */
--vms-ink-900: #1d1d1b;
--vms-ink-700: #3c3c3a;
--vms-ink-500: #6e6e6b;
--vms-ink-400: #8c8c89;
--vms-ink-300: #b5b5b2;
--vms-ink-200: #dcdcdc;
--vms-ink-100: #ececec;
--vms-ink-50: #f6f6f5;
/* De app-chrome is inkt: zwart, wit en de grijsramp hierboven. Kleur is in
deze app voorbehouden aan de twee dingen die iets betekenen — een leerlijn
of een status. Een derde kleurbetekenis zou de eerste twee verzwakken.
Tot 2026-09-18 stond hier een `--accent`-laag met zes `[data-accent]`-
thema's. Die was al sinds de fase-3-ronde dood: geen enkele pagina zette
het attribuut, en alle zeven tokens resolveerden overal naar de inkt
hieronder. Een naam die "accent" zegt terwijl er zwart staat, kost elke
lezer een omweg.
Wie een blok in één leerlijn wil zetten, gebruikt `[data-leerlijn]`
(vakgroep.css, weekraster.css) of `.ll-scope--*` (dashboard.css,
form.css). Die twee dragen de leerlijnkleur mét de AA-tekststap en mét de
sleutel die de database ook kent. */
/* --- Typografie (rolinversie t.o.v. de oude app!) --------
Quicksand (sans) = koppen/UI · Yrsa (serif) = lopende
tekst · Oswald = uppercase labels/eyebrows. */
--font-heading: 'Quicksand', system-ui, sans-serif;
--font-body: 'Yrsa', Georgia, 'Times New Roman', serif;
--font-label: 'Oswald', 'Arial Narrow', system-ui, sans-serif;
--fw-heading: 700;
--fw-subhead: 600;
--fw-body: 300;
--fw-body-em: 600;
--fw-label: 400;
--fw-label-thin: 200;
--fs-display: 4.5rem;
--fs-h1: 3rem;
--fs-h2: 2.25rem;
--fs-h3: 1.625rem;
--fs-h4: 1.25rem;
--fs-lead: 1.375rem;
--fs-body: 1.0625rem;
--fs-small: 0.9375rem;
--fs-eyebrow: 0.8125rem;
--fs-caption: 0.75rem;
/* --- UI-schaal — de dichte laag -------------------------
De schaal hierboven is een merkschaal: gemaakt voor koppen en
lopende tekst, met een display van 4,5rem. De app is een planner
— rastercellen, tabelrijen, chips — en had voor die laag geen
stappen. Gevolg: elke pagina loste dichtheid zelf op met een eigen
font-size, en dat werden er ~45 (0,82rem, 0,85rem, 0,78rem, …).
Deze vier stappen zijn de UI-laag. `--fs-ui-xs` is de ONDERGRENS:
niets in de app staat daaronder. Wie kleiner nodig heeft om het
passend te krijgen, heeft geen kleinere letter nodig maar minder
inhoud in die cel — of een andere weergave. Dichtheid komt uit
`[data-dicht]` in vormtaal.css, die ruimte verkleint en tekst met
rust laat. Print (`@media print`, invalbrief-doc.css) heeft zijn
eigen pt-schaal en valt hier buiten. */
--fs-ui-lg: 0.9375rem; /* 15px — de naam van een ding */
--fs-ui-md: 0.8125rem; /* 13px — tweede regel: tijd, groep */
--fs-ui-sm: 0.75rem; /* 12px — Oswald-label, kolomkop */
--fs-ui-xs: 0.6875rem; /* 11px — badge, chip · ONDERGRENS */
--lh-tight: 1.08;
--lh-heading: 1.18;
--lh-body: 1.5;
--ls-eyebrow: 0.14em;
--ls-heading: -0.01em;
--ls-tight: -0.02em;
/* --- Vlakken & tekst (neutraal chassis) --- */
--bg: var(--vms-ink-50); /* pagina — bijna-wit met warmte */
--card: var(--vms-white); /* kaarten liften van de pagina */
--input-bg: var(--vms-ink-50); /* sunken invoervlakken */
--input-focus: color-mix(in srgb, var(--vms-ink-900) 15%, transparent);
--text: var(--vms-ink-900);
--text-muted: var(--vms-ink-500); /* ink-500, níét ink-400: AA */
/* --- Randen & radii ---
Radius 0 overal: de vormtaal (vormtaal.css, handoff fase 3 §2)
haalt de vorm uit de 45°-hoek van de ruit — afgeschuinde hoeken
via clip-path — en niet uit ronding. Geen border-radius, ook geen
pillen. De namen blijven staan omdat de hele app erop meerijdt;
één plek zetten is de hele ripple. --radius-pill blijft dus ook 0:
een pil is in deze vormtaal een rechthoek. */
--border: var(--vms-ink-200);
--border-subtle: var(--vms-ink-100);
--radius-xs: 0;
--radius-sm: 0;
--radius: 0;
--radius-lg: 0;
--radius-xl: 0;
--radius-pill: 0;
/* --- Elevation: zachte, warme schaduwen (inkt, lage alpha) --- */
--shadow-color: 29 29 27;
--shadow-xs: 0 1px 2px rgb(var(--shadow-color) / 0.06);
--shadow-sm: 0 2px 6px rgb(var(--shadow-color) / 0.07);
--shadow-md: 0 6px 18px rgb(var(--shadow-color) / 0.09);
--shadow-lg: 0 14px 34px rgb(var(--shadow-color) / 0.12);
--ring-accent: 0 0 0 3px
color-mix(in srgb, var(--vms-ink-900) 38%, transparent);
/* --- Ruimte (4px-grid) --- */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.5rem;
--space-6: 2rem;
--space-7: 2.5rem;
--space-8: 3rem;
--space-9: 4rem;
/* Rust-regel (redesign 2026): kaarten ademen — ruimte tússen
secties komt uit deze token, niet uit extra borders/boxen. */
--section-gap: var(--space-5);
/* --- De app-balk (fase 3, ontwerpen `3b`/`6a`/`6b`/`8a`) ----
Eén witte balk bovenaan elke ingelogde pagina: logo, bestemmingen,
acties. De hoogte staat hier omdat twee bestanden hem nodig hebben —
`app-nav.css` tekent de balk, en `password-protect.css` centreert de
vaste avatar erin. De avatar is géén flex-item van de balk (hij komt
uit de inloggate en staat ook op pagina's zónder balk), dus de balk
houdt rechts `--app-bar-slot` vrij zodat de twee elkaar nooit raken. */
--app-bar-pad-y: 0.8rem;
--app-bar-h: calc(2 * var(--app-bar-pad-y) + var(--vt-raakvlak, 46px));
--app-bar-avatar: 44px;
--app-bar-slot: calc(var(--space-5) + var(--app-bar-avatar) + var(--space-3));
/* --- Motion: kort, zacht, oprecht — nooit bouncy --- */
--dur-fast: 120ms;
--dur-base: 200ms;
--dur-slow: 320ms;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
--ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
--press-scale: 0.97;
--hover-lift: -2px;
/* --- Status (bewust GEEN merk-kleuren: rood/geel/groen zijn
leerlijn-identiteiten — besluit §6.4)
De scheiding werkt twee kanten op en is strikt: deze drie zijn de
énige statuskleuren, en een leerlijnkleur (--vms-green/-blue/
-yellow/-red/-purple en hun -deep/-ink/-fill/-soft-stappen)
mag nooit status dragen. Anders leest "groen" op
het ene scherm als de leerlijn Groen en op het andere als "klaar".
tests/vormtaal.test.mjs bewaakt dit voor de .vt-status-klassen. --- */
--danger: #c0392b;
--danger-light: #fdf0f0;
--warning: #b45309;
--warning-light: #fef9f0;
--success: #1c7f46;
--success-light: #eafaf1;
}
/* ============================================================
Global reset & base
============================================================ */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
body {
font-family: var(--font-body);
font-weight: var(--fw-body);
font-size: var(--fs-body);
background: var(--bg);
color: var(--text);
line-height: var(--lh-body);
min-height: 100vh;
}
/* Yrsa Light heeft een stevige tegenhanger nodig voor nadruk */
b,
strong {
font-weight: var(--fw-body-em);
}
h1,
h2,
h3,
h4 {
font-family: var(--font-heading);
font-weight: var(--fw-heading);
line-height: var(--lh-heading);
letter-spacing: var(--ls-heading);
}
/* UI-controls zijn Quicksand — serif hoort alleen in lopende tekst */
button,
input,
select,
textarea {
font-family: var(--font-heading);
}
@media (prefers-reduced-motion: reduce) {
:root {
--dur-fast: 0ms;
--dur-base: 0ms;
--dur-slow: 0ms;
--press-scale: 1;
--hover-lift: 0px;
}
}
/* ============================================================
Accessibility: focus
============================================================ */
:focus-visible {
outline: 2px solid var(--vms-black);
outline-offset: 2px;
}
:focus:not(:focus-visible) {
outline: none;
}
/* ============================================================
Merk-motieven & typografische rollen (gedeeld)
============================================================ */
/* Oswald eyebrow — sectie-kicker boven een kop */
.vms-eyebrow {
font-family: var(--font-label);
font-weight: var(--fw-label);
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
color: var(--text-muted);
}
/* De kop van een pagina — eyebrow + titel, in de inhoud en niet in de
chrome (fase-3-ontwerpen `3b`, `6a`, `6b`). Tot 2026-08-29 stond dit in
een blauwe banner bóven de navigatiebalk; twee koppen boven elkaar zeggen
twee keer waar je bent en één keer te vaak. De breedte komt van de pagina
zelf: op Scholen van `.page-kop` in dashboard.css, elders van de
`.container` eromheen. */
.page-kop {
margin: var(--space-5) 0 var(--space-4);
}
.page-kop .vms-eyebrow {
display: flex;
gap: 0.6rem;
align-items: center;
}
/* De ruit is inkt, ook al is de tekst ernaast gedempt: hij is het merkteken,
geen leesteken. */
.page-kop .vms-ruit {
color: var(--vms-ink-900);
}
.page-kop h1 {
margin: 0.3rem 0 0;
color: var(--vms-ink-900);
font-family: var(--font-heading);
font-size: var(--fs-h2);
font-weight: var(--fw-heading);
line-height: 1.05;
letter-spacing: -0.025em;
}
.page-kop p:not(.vms-eyebrow) {
max-width: 62ch;
margin: 0.55rem 0 0;
color: var(--text-muted);
font-family: var(--font-body);
font-size: var(--fs-body);
font-weight: var(--fw-body);
line-height: var(--lh-body);
text-wrap: pretty;
}
/* Dé leerlijn-marker (geen emoji) — een gevúlde ruit. Handoff fase 3 §2:
een bewuste, met de owner afgestemde afwijking van het huisstijlhandboek,
dat hier de cirkel kent en de ruit als omtrek.
De rotatie staat in `transform` van het element zelf en nooit in keyframes,
anders is de marker een vierkant zodra een animatie stilstaat.
De tegen-scale houdt de optische maat gelijk: 45° draaien vergroot de
zichtbare breedte met √2, dus zonder scale groeit elke stip 41%.
scale(0.8) geeft de ruit ~81% van het vlak van de oude cirkel — optisch
even zwaar — bij een punt-tot-punt-maat van 1,13× de oude diameter, wat
binnen de kleinste spatiëring valt. De layoutbox verandert niet (een
transform beïnvloedt de flow niet), dus elke pagina die zijn eigen maat
zet (.week-chip, .ll-tag, .ll-dots, .step-ll, .picker-item, .ivw-chip …)
houdt zijn formaat én zijn spatiëring. */
.vms-dot {
display: inline-block;
width: 0.85em;
height: 0.85em;
border-radius: 0;
background: var(--vms-ink-900);
transform: rotate(45deg) scale(0.8);
flex: none;
vertical-align: baseline;
}
/* De ruit (vierkant, 45° gedraaid) — het merkteken */
.vms-ruit {
display: inline-block;
width: 0.8em;
height: 0.8em;
border: 2px solid currentColor;
transform: rotate(45deg);
flex: none;
}
.vms-ruit--filled {
background: currentColor;
}
/* Cluster-label — typografische sub-kop bínnen een sectiekaart.
Bewust géén box: clusters scheiden met type + witruimte, niet
met randen (rust-regel). Gebruik: