/* Designtokens — de enige plek waar kleuren, maten en typografie worden bepaald.
 *
 * Waarden overgenomen uit het UI-prototype (prototypes/UI_dev), dat een
 * Material 3-palet gebruikt. Alleen de wáárden zijn overgenomen; de code daar
 * is Tailwind en blijft waar hij staat (ADR-0002, ADR-0015).
 *
 * Gebruik altijd een token, nooit een losse hex. Staat de kleur die je nodig
 * hebt er niet bij, voeg hem hier toe in plaats van hem in een component te
 * schrijven — anders krijgen we een tweede designsysteem terug.
 */

:root {
    /* --- Kleur: basis --- */
    --kleur-primair: #0058be;
    --kleur-primair-hover: #2170e4;
    --kleur-op-primair: #ffffff;
    --kleur-primair-zacht: #d8e2ff;
    --kleur-op-primair-zacht: #001a42;

    /* --- Kleur: oppervlak --- */
    --kleur-achtergrond: #f7f9fb;
    --kleur-oppervlak: #ffffff;
    --kleur-oppervlak-laag: #f2f4f6;
    --kleur-oppervlak-midden: #eceef0;
    --kleur-oppervlak-hoog: #e6e8ea;
    --kleur-oppervlak-hoogst: #e0e3e5;

    /* --- Kleur: tekst ---
     * De dofste tekstkleur draagt de metaregels, de zijbalkkopjes en de
     * adresregel onder een weblink: klein én dof. #727785 haalde 4.47 op wit
     * en 4.06 op --kleur-oppervlak-laag, net onder de AA-grens van 4.5.
     * #6b7080 haalt 4.90 / 4.45 en is optisch nauwelijks donkerder.
     */
    --kleur-tekst: #191c1e;
    --kleur-tekst-zacht: #424754;
    --kleur-tekst-dof: #6b7080;
    --kleur-op-donker: #eff1f3;

    /* --- Kleur: lijnen ---
     * --kleur-rand is decoratie (1.70 op wit). Is een lijn de énige
     * begrenzing van een invoerveld, dan moet hij 3:1 halen (WCAG 1.4.11):
     * gebruik dan --kleur-rand-sterk.
     */
    --kleur-rand: #c2c6d6;
    --kleur-rand-sterk: #6b7080;

    /* --- Kleur: waar de focus staat ---
     * Eén ring voor de hele app (componenten.css). Op donker is blauw niet te
     * zien, dus de topbar krijgt de lichte variant.
     */
    --kleur-focus: var(--kleur-primair);
    --kleur-focus-op-donker: var(--kleur-topbar-accent);

    /* --- Kleur: op een donker vlak ---
     * --kleur-op-donker is de rusttoestand van de topbar; -fel is waar iets
     * oplicht (hover, de actieve flow, een avatar). Die stond als losse #fff
     * op zes plekken in componenten.css.
     */
    --kleur-op-donker-fel: #ffffff;

    /* --- Kleur: sluiers ---
     * Wat over de pagina ligt: de lade-achtergrond op smal scherm (zacht) en
     * de ::backdrop van een modal en het wachtscherm (sterk).
     */
    --kleur-sluier: rgba(15, 23, 42, 0.35);
    --kleur-sluier-sterk: rgba(15, 23, 42, 0.45);

    /* --- Kleur: betekenis (status, badges) --- */
    --kleur-fout: #ba1a1a;
    --kleur-fout-zacht: #ffdad6;
    --kleur-op-fout-zacht: #93000a;
    --kleur-waarschuwing: #8a5300;
    --kleur-waarschuwing-zacht: #fef3c7;
    --kleur-goed: #1c6b3c;
    --kleur-goed-zacht: #dcfce7;
    --kleur-neutraal: #424754;
    --kleur-neutraal-zacht: #e6e8ea;
    /* Het merkje van de maker en de andere versies (ADR-0029): paars, want
       blauw is selectie, amber is "niet jouw werk" en groen is gedeeld. */
    --kleur-signaal: #5b4680;
    --kleur-signaal-hover: #4a3768;
    --kleur-op-signaal: #ffffff;
    --kleur-signaal-zacht: #e8def8;
    --kleur-signaal-lijn: #9a86c4;
    /* Het kleine AI-label (components/ai_badge.html): violet, zodat het niet
       met een versie (paars), een selectie (blauw) of een categorie verwart. */
    --kleur-ai: #6a2c91;
    --kleur-ai-zacht: #f3e8fb;
    /* De sterren van een beoordeling (venster 5 van "Nieuwe bouwsteen"). */
    --kleur-ster: #e0a100;

    /* --- Ruimte --- */
    --ruimte-1: 0.25rem;
    --ruimte-2: 0.5rem;
    --ruimte-3: 0.75rem;
    --ruimte-4: 1rem;
    --ruimte-5: 1.5rem;
    --ruimte-6: 2rem;
    --ruimte-7: 3rem;

    /* --- Randen --- */
    --rond-klein: 0.375rem;
    --rond: 0.5rem;
    --rond-groot: 0.75rem;
    --rond-vol: 999px;

    /* --- Schaduw --- */
    --schaduw-1: 0 1px 2px rgba(0, 0, 0, 0.05);
    --schaduw-2: 0 4px 20px rgba(0, 88, 190, 0.08);

    /* --- Typografie --- */
    --lettertype: 'Inter', system-ui, -apple-system, sans-serif;
    /* Voor wat de gebruiker letterlijk typt: markdown in de tekstbewerker,
       een bestandsnaam, een sleutel. Zelfde stack als `reacties.css` gebruikt. */
    --lettertype-code: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    /* Alleen voor kopjes in kapitalen (de zijbalk, een sectielabel): daar leest
       0.6875rem nog prettig omdat er weinig woorden staan. Nooit voor een zin. */
    --tekst-xxs: 0.6875rem;
    --tekst-xs: 0.75rem;
    --tekst-s: 0.8125rem;
    --tekst-m: 0.875rem;
    --tekst-l: 1rem;
    --tekst-xl: 1.125rem;
    --tekst-2xl: 1.5rem;
    --tekst-3xl: 1.875rem;

    /* --- Kleur: navigatie (donkere topbar, fase 2b) --- */
    --kleur-topbar: #1e293b;
    --kleur-topbar-hoog: #2c3a52;
    --kleur-topbar-tekst: #b9c2d4;
    --kleur-topbar-accent: #8fb4ff;

    /* --- Kleur: categorie-chips en vraagstuk-tegels --- */
    --kleur-cat-opdracht: #e8def8;
    --kleur-op-cat-opdracht: #4a3a67;
    --kleur-cat-oefening: #d7f5ee;
    --kleur-op-cat-oefening: #0f5c4c;
    --kleur-cat-context: #fde2ef;
    --kleur-op-cat-context: #7b2856;
    --kleur-tegel-groen: #d7f5df;
    --kleur-op-tegel-groen: #1c6b3c;
    --kleur-tegel-paars: #e8def8;
    --kleur-op-tegel-paars: #5b4680;

    /* --- Kleur: de SOLO-treden van een interactieve les (ADR-0037) ---
     * Weten · Beschrijven · Verbinden · Verder denken: een zachte vlakkleur
     * met een donkere tekstkleur, oplopend van blauw naar paars. Kleur is
     * nooit de enige drager: de treden hebben ook één tot vier blokjes.
     */
    --kleur-trede-uni: var(--kleur-primair-zacht);
    --kleur-op-trede-uni: var(--kleur-op-primair-zacht);
    --kleur-trede-multi: var(--kleur-cat-oefening);
    --kleur-op-trede-multi: var(--kleur-op-cat-oefening);
    --kleur-trede-relationeel: var(--kleur-waarschuwing-zacht);
    --kleur-op-trede-relationeel: var(--kleur-waarschuwing);
    --kleur-trede-abstract: var(--kleur-tegel-paars);
    --kleur-op-trede-abstract: var(--kleur-op-tegel-paars);

    /* --- Afmetingen ---
     * De schil schaalt mee met het scherm: `clamp()` leest de vensterbreedte
     * via `vw`, dus CSS meet de resolutie zelf — daar is geen JavaScript voor
     * nodig. Lees elke regel als: minimum (laptop 1280) — meeschalend —
     * maximum (breed scherm). Het maximum blijft staan, zodat een regel tekst
     * op een 4K-scherm niet onleesbaar lang wordt.
     */
    --hoogte-topbar: 52px;
    --breedte-zijbalk: clamp(244px, 15vw, 300px);
    --breedte-paneel: clamp(400px, 24vw, 520px);
    --breedte-inhoud: clamp(1180px, 94vw, 2000px);
    --breedte-leeskolom: clamp(880px, 68vw, 1240px);

    /* ------------------------------------------------------------------
     * Overgangsaliassen: style.css gebruikt nog de oude namen. Ze wijzen
     * naar de tokens hierboven, zodat het hele scherm in één keer meekleurt.
     * Verdwijnen zodra style.css leeg is.
     *
     * Dit is de enige plek met waarden. style.css laadt ná dit bestand, dus
     * een eigen `:root` dáár wint en zet elke knop op een oude waarde als
     * #3b82f6 (wit erop: 3.68 — onder AA) in plaats van op --kleur-primair
     * (6.69). Zet er nooit een tweede `:root` naast.
     * ------------------------------------------------------------------ */
    --bg-main: var(--kleur-achtergrond);
    --text-main: var(--kleur-tekst-zacht);
    --text-light: var(--kleur-tekst-dof);
    --accent-color: var(--kleur-primair);
    --accent-hover: var(--kleur-primair-hover);
    --white: var(--kleur-oppervlak);
    --border-color: var(--kleur-rand);
    --font-family: var(--lettertype);
}