/*
 * The house style, once.
 *
 * These variables used to sit in a :root block inside every page, five copies of the same ramp with
 * small differences nobody intended: admin had an --off that index did not, contact was missing the
 * greys, and a colour changed in one place stayed old in the other four. One file means one answer.
 *
 * It is also what makes white-labelling possible at all. An institution's colours arrive as a handful
 * of these variables and are written onto the root element at run time; everything below is the
 * default they override. Contrast, spacing and layout stay ours — a school picks colours, not CSS.
 *
 * Contrast checked against WCAG 2.2 AA (4.5:1 body, 3:1 large text and UI).
 */
:root {
    --accent: #4500e2;        /* primary action only — 8.9:1 with white */
    --accent-2: #3100a2;      /* action hover, links on light — 12.7:1 */
    --accent-light: #b266ff;  /* decorative only: never text under 24px */
    --accent-pale: #E9DCFF;   /* body copy on dark — 12.7:1 on #2A0060 */
    --accent-dim: #d8b2ff;    /* large labels on dark (>= 18px bold) */
    --ink: #3100a2;
    --deep: #1C0A3D;          /* dark section base */
    /* De twee extra donkere lagen uit Thomas' Figma-slag van 16 augustus: --deep-2 als
       tussenstap op de how-it-works-kaarten, --deepest voor de founder-note en de voettekst —
       de plekken waar de pagina op zijn stilst is. */
    --deep-2: #2E1F5E;
    --deepest: #0E0520;
    /* Built from the three above rather than written out, so an institution that replaces its
       colours gets its headers and hero repainted too. Spelled out literally, this was the one
       place a rebrand did not reach: the palette changed and the largest surface on the page
       stayed ours.

       Two stops rather than three. The middle one used to be --accent-2, which an institution has
       no reason to pick and which therefore stayed ours: a teal school ended up with a purple band
       through its own header. Our own two ends sit almost on the line the third point was on, so
       dropping it costs us nothing and makes every other palette coherent. */
    --gradient: linear-gradient(135deg, var(--deep) 0%, var(--accent) 100%);
    /* The lighter tints stay literal here. An institution's are worked out from their accent by the
       server and sent alongside it, so our own palette keeps the exact values it was designed with
       rather than becoming whatever a colour function returns. */

    --paper: #FAF8FF;
    --surface: #FFFFFF;
    --text: #1A1726;
    --text-2: #4A4360;
    --text-3: #6B6383;
    --line: #E4DEF0;
    /* Twee die alleen in de gedrukte sjablonen bestonden. Een vel op papier verdraagt — en vraagt —
       een steviger lijn dan een scherm, dus dit is geen dubbeling maar een tweede rol. Ze staan nu
       hier omdat een kleur zonder naam de volgende keer weer als losse hex wordt overgetypt. */
    --line-strong: #C9C0DC;
    --paper-2: #F1EDFA;
    /* Het lichtste vlak van het accent: waar het blok staat waar de coach nu naar vraagt.
       Stond als losse hex in het canvasvel en nergens hier, dus kon hij niet meebewegen. */
    --accent-wash: #F3ECFF;
    /* De gangbare manier op de waardecurve: grijs met een paarse ondertoon, zodat hij naast
       de accentlijn staat en niet ernaast valt. */
    --neutral-line: #8E86A8;
    /* De regel onder het logo op het canvasvel. */
    --accent-soft: #cbb8ff;

    /* Kept because older pages still name them. Aliases rather than second opinions: two variables
       that mean the same thing and hold different values is the bug this file exists to end. */
    --grey-1: #2E2545;
    --grey-2: var(--text-2);
    --grey-3: var(--text-3);
    --grey-4: var(--line);
    --grey-5: #F0EBFB;

    /* Status colours, used by the admin and teacher screens. */
    --ok: #0F6B3F;
    --ok-soft: #E4F5EC;
    --warn: #8A5A00;
    --warn-soft: #FDF2DD;
    --warn-line: #F0D9A8;
    --off: #6B6383;
    --off-soft: #EFECF5;
    --stop: #8A1538;
    --stop-soft: #FDF0F4;
    --stop-line: #F1C4C0;

    /* An institution may replace the typeface; unset, this resolves to what the pages ship with. */
    --brand-font: 'Work Sans', system-ui, sans-serif;
    /* Het handschrift-accent: alleen de "AI" in het logo-lockup en de handtekening onder de
       founder-note. Wie hem ergens anders wil gebruiken, neemt een argument mee. */
    --font-mark: 'Caveat Brush', cursive;
    /* De posterletter uit de Figma-slag van 16 augustus: Anton, alleen voor de publieke pagina's —
       koppen, de grote nummers en de belangrijkste CTA's. Het sessiescherm blijft Work Sans
       (design-brief §10: body-leesbaarheid boven persoonlijkheid). */
    --font-display: 'Anton', var(--brand-font);

    /* De typeschaal. Voor deze schaal stonden er twintig verschillende lettergroottes in het
       coachscherm alleen, met halve pixels ertussen (11.5, 12.5, 13.5, 14.5) — geen ontwerp maar
       sediment. Elf stappen, elk met een rol; een maat die hier niet op staat is een maat die
       niet bestaat. --fs-touch is geen esthetiek: onder de 16px zoomt iOS in zodra iemand een
       invoerveld aanraakt, dus dat is de vloer voor invoer op een telefoon. */
    --fs-2xs: 11px;    /* kleine lettertjes: toetsenbord-hints, voetnoten */
    --fs-xs: 12px;     /* bijschriften, labels op canvasblokken */
    --fs-sm: 13px;     /* secundaire UI: stepper, paneelkoppen, systeemregels */
    --fs-md: 14px;     /* begeleidende tekst naast het gesprek */
    --fs-base: 15.5px; /* het gesprek zelf — een uur lezen, dus dit is de maat die telt */
    --fs-touch: 16px;  /* minimum voor invoervelden op mobiel (iOS-zoomdrempel) */
    --fs-lg: 17px;     /* nadruk binnen lopende tekst */
    --fs-xl: 19px;     /* schermtitels */
    --fs-2xl: 21px;    /* sectiekoppen */
    --fs-3xl: 26px;    /* paginakoppen */
    --fs-4xl: 30px;    /* het ene grote getal (prijs, score) */
    /* De postermaat van de 16-aug-slag: schermtitels in de schil van de app (thuis, lege staat,
       de abonnementspoort) — nadrukkelijk niet voor de leesvlakken, die houden de schaal
       hierboven. Eén token, zodat de guard hem kent en een maat buiten de schaal blijft
       bestaan als een maat die niet bestaat. */
    --fs-display: clamp(26px, 3.4vw, 34px);
}