/* =============================================================================
   Aanvulling op het Coen Design System v2.1.

   components.css en base.css verwijzen naar dertien tokens die tokens.css niet
   definieert. Dat faalt stil — CSS gooit zo'n declaratie weg zonder melding, dus
   je ziet geen foutmelding maar een hoekige pil en een invoerveld dat bij focus
   niets doet.

   Dit hoort in de bron opgelost. Staan ze in v3, dan kan dit bestand weg en mag
   er visueel niets veranderen; dat is meteen de toets of deze waarden kloppen.
   tests/unit/DesignSystemTest.php bewaakt de lijst.

   Een veertiende, --pa-blue, staat er wel maar hoeft niets: hij is geschreven als
   var(--pa-blue, var(--accent, #2A6FDB)) en valt dus netjes terug. Zo hoort het,
   en het laat zien dat de dertien hieronder simpelweg vergeten zijn.

   Laadt NA tokens.css en base.css, VÓÓR components.css.
   ============================================================================= */

:root {
    /* Vormen. --radius bestaat wel (8px), --radius-lg ook (12px). */
    --radius-pill:  999px;                /* .pill — een pil is rond, niet hoekig */
    --radius-md:    var(--radius);        /* alert, dropdown, skeleton */
    --radius-modal: var(--radius-lg);     /* .modal — een tree ruimer dan een kaart */

    /* Randen. --border-subtle is de standaard kaartrand. */
    --border:        var(--border-subtle);
    --border-accent: var(--accent);       /* rand van een veld met focus */

    /* Tekst. --text-default is de bodykleur. */
    --text: var(--text-default);

    /* Donker vlak: tooltip en toast. De koptekstkleur is het donkerste dat het
       systeem kent, en die staat al tegenover --text-inverse. */
    --surface-inverse: var(--text-primary);

    /* Eén trede boven --shadow-lg, voor de modal die boven alles zweeft. */
    --shadow-xl: 0 8px 32px rgba(0, 0, 0, .16);

    /* Tekstgrootte tussen --fs-lg (18px) en --fs-2xl (28px). Gelijk aan --fs-h2,
       want h2 en .page-header h1 zijn precies wat hem gebruiken. */
    --fs-xl: var(--fs-h2);

    /* Volle statuskleuren voor de toast. De tokens --groen, --geel en --rood
       bestaan; deze namen zijn de Engelse ingang ernaartoe. */
    --blue:  var(--accent);
    --green: var(--groen);
    --amber: var(--geel);

    /* Rand van .alert-danger. De drie andere 100-tinten bestaan wel
       (--blue-100, --green-100, --amber-100); dit is dezelfde lichtheid op --rood. */
    --danger-100: #F7CFC2;
}