/* QuizX Kiosk Studio, tokens. v5 (pakket V, 6 november 2026): rust. Liam vond v4 te vol, te dicht op elkaar en kleurloos;
   v5 is minimalistischer maar niet incompleet: witte grond, meer lucht, grotere letters, beelden en iconen.

   v5-maten (ook voor pakket N in css/pages/v5-nav.css; gebruik de variabele, niet het getal):
     --v5-icoon:28px        standaard icoon (navigatie, tegels, kopjes); ic() in js/studio/icons.js tekent op 28
     --v5-icoon-klein:20px  icoon in een knop, pil, tabelcel of invoerveld (class 'klein' of vanzelf via de context)
     --v5-ruimte:32px       lucht tussen blokken en kaarten; --v5-ruimte-s (16px) binnen een blok
     --v5-tegel-min:240px   kleinste breedte van een tegel met beeld (16:9): quizzen, events, media
     --v5-kop:28px          paginakop; --v5-kop-2 (20px) kop van een kaart of sectie
     --v5-basis:16px        basisletter; --v5-klein (14px) voor uitleg en metadata, nooit kleiner dan 13px
     --v5-tik:44px          kleinste hoogte van alles wat je aanklikt (knop, veld, tab, rij)
     --v5-rij:48px          regelhoogte van een tabel of lijst
     --v5-kaart-p:24px      binnenruimte van een kaart
     --v5-radius:12px       afronding van kaarten en tegels (--r2); knoppen en velden --r (8px)
   Kleur: wit is de grond, plum het enige accent (koppen, primaire knop, gekozen staat), goud alleen voor actief en focus.
   De kleur zit in beeld, iconen en statuspunten, niet in vlakken: geen paarse kopbanden, zachte vlakken alleen voor status.

   Letter (V-46, 14 oktober 2026): koppen in Sora 600 (geometrisch en rond, het dichtst bij LEMON MILK Pro), tekst in Plus Jakarta Sans,
   getallen in IBM Plex Mono. Archivo en Manrope staan als terugval in de stapel zodat login.html hetzelfde beeld houdt.
   n500, ok en warn zijn iets donkerder gezet zodat tekst op wit en op de zachte statusvlakken 4,5:1 haalt. */
:root{
  color-scheme:light;
  /* palet */
  --plum:#2b1a49;--plum-700:#3d2a63;--plum-500:#5a4784;--plum-100:#ebe6f2;--plum-50:#f5f2f9;
  --gold:#c9a227;--gold-100:#f6efd8;
  --n0:#ffffff;--n50:#faf9f6;--n100:#f3f1ec;--n200:#e6e2da;--n300:#d2ccc0;--n400:#aaa396;--n500:#6d675b;--n700:#4e483f;--n900:#1e1a15;
  --ok:#276f47;--ok-100:#e4f1e8;--warn:#955807;--warn-100:#fbefd9;--err:#b3261e;--err-100:#f9e5e3;--info:#2a5d9b;--info-100:#e3ecf7;
  /* v5-maten, zie de uitleg bovenaan */
  --v5-icoon:28px;--v5-icoon-klein:20px;--v5-ruimte:32px;--v5-ruimte-s:16px;--v5-tegel-min:240px;
  --v5-kop:28px;--v5-kop-2:20px;--v5-basis:16px;--v5-klein:14px;--v5-tik:44px;--v5-rij:48px;--v5-kaart-p:24px;--v5-radius:12px;
  --lijn-zacht:#ece8e1;  /* rand van kaarten en scheidingslijnen: een tint lichter dan n200 */
  /* maat */
  --r:8px;--r2:12px;
  --schaduw:none;
  --rij:var(--v5-rij);   /* rijhoogte, drie dichtheden: 44, 48, 56 */
  --blok:var(--v5-ruimte); /* lucht tussen blokken en kaarten: 24, 32, 40 */
  --kp-y:var(--v5-kaart-p);--kp-x:var(--v5-kaart-p); /* vulling van een kaart */
  --barH:64px;           /* gemeten hoogte van de balk, gezet door render() */
  --rail:88px;
  /* letter */
  --font-kop:'Sora','Archivo',system-ui,sans-serif;
  --font-tekst:'Plus Jakarta Sans','Manrope',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
  /* afgeleide namen die de Studio-code gebruikt */
  --ground:var(--n0);--surface:var(--n0);--surface-2:var(--n50);--ink:var(--n900);--muted:var(--n500);--line:var(--lijn-zacht);
  --primary:var(--plum);--primary-ink:#ffffff;--primary-soft:var(--plum-100);--accent:var(--gold);--accent-soft:var(--gold-100);
  --ok-soft:var(--ok-100);--warn-soft:var(--warn-100);--danger:var(--err);--danger-soft:var(--err-100);--info-soft:var(--info-100);
  --r-s:var(--r);--r-m:var(--r2);--shadow:var(--schaduw);
  /* alleen nog in gebruik door het staff-paneel van de kiosk (css/kiosk.css); blijft op de oude letter zodat de kiosk niet meebeweegt */
  --font-ui:'Manrope',system-ui,sans-serif;--font-display:'Archivo',system-ui,sans-serif;
}
/* donker: dezelfde rollen, andere waarden */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;
  --plum:#b9a3e6;--plum-700:#cdbcef;--plum-500:#a995d6;--plum-100:#2d2344;--plum-50:#251d38;
  --gold:#d9b23a;--gold-100:#3a3120;
  --n0:#1b1724;--n50:#201b2b;--n100:#272131;--n200:#352d41;--n300:#473d55;--n400:#6f6480;--n500:#a197b0;--n700:#cfc6da;--n900:#f1edf7;
  --ok:#6cc48e;--ok-100:#1f3327;--warn:#e6a93a;--warn-100:#3a2f14;--err:#ff8a84;--err-100:#3d1f22;--info:#8ab6ec;--info-100:#1c2b40;
  --schaduw:none;--lijn-zacht:#2c2537;--primary-ink:#14101f}}
:root[data-theme="dark"]{color-scheme:dark;
  --plum:#b9a3e6;--plum-700:#cdbcef;--plum-500:#a995d6;--plum-100:#2d2344;--plum-50:#251d38;
  --gold:#d9b23a;--gold-100:#3a3120;
  --n0:#1b1724;--n50:#201b2b;--n100:#272131;--n200:#352d41;--n300:#473d55;--n400:#6f6480;--n500:#a197b0;--n700:#cfc6da;--n900:#f1edf7;
  --ok:#6cc48e;--ok-100:#1f3327;--warn:#e6a93a;--warn-100:#3a2f14;--err:#ff8a84;--err-100:#3d1f22;--info:#8ab6ec;--info-100:#1c2b40;
  --schaduw:none;--lijn-zacht:#2c2537;--primary-ink:#14101f}
/* drie dichtheden: compact voor wie veel op een scherm wil, ruim voor aanraakschermen; ook compact blijft op 44 px tikhoogte */
:root[data-dichtheid="compact"]{--rij:44px;--blok:24px;--kp-y:18px;--kp-x:20px}
:root[data-dichtheid="ruim"]{--rij:56px;--blok:40px;--kp-y:28px;--kp-x:32px}

*{box-sizing:border-box}
html{background:var(--ground)}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--font-tekst);font-size:var(--v5-basis);line-height:1.55;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;text-wrap:balance;line-height:1.25;font-family:var(--font-kop);font-weight:600;letter-spacing:-.01em}
a{color:var(--plum)}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
svg.ic{width:var(--v5-icoon);height:var(--v5-icoon);stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none;display:inline-block;vertical-align:middle}
svg.ic.klein{width:var(--v5-icoon-klein);height:var(--v5-icoon-klein)}
svg.ic.groot{width:40px;height:40px;stroke-width:1.25}