/* ===========================================================================
   Retrieva — ontwerptokens
   ---------------------------------------------------------------------------
   Alle kleuren, afstanden en letters staan hier. Componenten gebruiken alleen
   deze variabelen, nooit losse hexcodes. Zo verandert het thema op één plek.

   Donker is de standaard: dit is een app waar 's avonds lang in gewerkt wordt.
   Licht staat er volwaardig naast, voor daglicht en voor afdrukken.
   =========================================================================== */

:root {
  /* ---------------------------------------------------------------- letters */
  /* Twee families. Space Grotesk voor koppen en getallen (heeft tabellarische
     cijfers, dus kolommen lopen recht), IBM Plex Sans voor alles wat je leest. */
  --font-kop:  'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;

  /* Ondergrens is 12,5px. Alles daaronder is op een telefoon en op een scherm
     met veel omgevingslicht slecht te lezen, en de meeste tekst die deze maten
     kreeg is uitleg — juist het soort tekst dat gelezen moet worden. */
  --tekst-xs:  12.5px;
  --tekst-s:   14px;
  --tekst-m:   15.5px;
  --tekst-l:   17.5px;
  --tekst-xl:  21px;
  --tekst-2xl: 27px;
  --tekst-3xl: 34px;

  --regel-strak: 1.25;
  --regel-normaal: 1.55;
  --regel-ruim: 1.65;

  /* ---------------------------------------------------------------- ruimte */
  --r1:  4px;
  --r2:  8px;
  --r3:  12px;
  --r4:  16px;
  --r5:  22px;
  --r6:  30px;
  --r7:  44px;
  --r8:  64px;

  /* ---------------------------------------------------------------- vormen */
  --rond-s:  6px;
  --rond-m:  9px;
  --rond-l:  13px;
  --rond-vol: 999px;

  --rand-breedte: 1px;

  /* ---------------------------------------------------------------- tijden */
  --snel: .12s;
  --rustig: .25s;

  /* --------------------------------------------------------------- niveaus */
  /* De vijf moeilijkheidsniveaus hebben één vaste weergave in de hele app. */
  --niveau-leeg: var(--rand);
  --niveau-vol: var(--actie-vlak);

  /* ------------------------------------------------------------- z-lagen */
  --laag-plakkerig: 20;
  --laag-overlay: 60;
  --laag-melding: 80;
}

/* ============================ donker (standaard) ========================== */
:root,
:root[data-thema='donker'] {
  color-scheme: dark;

  --grond:      #0A0B10;   /* de pagina zelf */
  --vlak:       #12141D;   /* kaarten en panelen */
  --vlak-diep:  #0D0F16;   /* verdiepte vlakken binnen een kaart */
  --vlak-hover: #1A1D29;
  --zijbalk:    #07080C;

  --rand:        #23263A;
  --rand-sterk:  #363A55;

  --tekst:       #F2F4FA;
  --tekst-zacht: #B7BCD0;
  --tekst-dof:   #8C93AE;

  /* Eén hoofdkleur voor acties: elektrisch blauw. Geel voor nadruk. Verder
     grijs. Zelfde palet als de landingspagina, zodat site en app één merk
     zijn. */
  --actie-vlak:   #4F63FF;
  --actie-hover:  #6B7CFF;
  --actie-tekst:  #FFFFFF;
  --actie-lijn:   #8A97FF;
  --actie-zacht:  #1A1E3D;   /* achtergrond van een actief/gemarkeerd blok */
  --geel:         #FFC531;
  --geel-tekst:   #1A1300;

  /* Vaste betekenissen. Nooit alleen op kleur leunen: overal ook een icoon
     of een woord erbij. */
  --goed:       #4FD98B;
  --goed-vlak:  #12271C;
  --fout:       #FF6B5E;
  --fout-vlak:  #2E1715;
  --amber:      #FFC531;   /* misvatting én agendabotsing */
  --amber-vlak: #2B2210;
  --koel:       #5FD3F0;   /* uitleg en toelichting */
  --koel-vlak:  #0F2630;

  --schaduw-s: 0 1px 2px rgba(0, 0, 0, .4);
  --schaduw-m: 0 2px 4px rgba(0, 0, 0, .35), 0 10px 26px rgba(0, 0, 0, .35);
  --schaduw-l: 0 24px 60px rgba(0, 0, 0, .55);

  --overlay: rgba(4, 7, 12, .86);
}

/* ================================== licht ================================= */
:root[data-thema='licht'] {
  color-scheme: light;

  --grond:      #EEF1F5;
  --vlak:       #FFFFFF;
  --vlak-diep:  #E5EBF2;
  --vlak-hover: #DAE3ED;
  --zijbalk:    #0F1720;   /* de zijbalk blijft donker: dat is het merk */

  --rand:        #B6C2CF;
  --rand-sterk:  #8C99A8;

  --tekst:       #111A24;
  --tekst-zacht: #42505F;
  --tekst-dof:   #546475;

  /* Lime is op wit te licht voor een knop, dus in het lichte thema wordt het
     dezelfde kleur maar dan donkerder. De tint blijft herkenbaar. */
  --actie-vlak:   #3546D9;
  --actie-hover:  #2A39B8;
  --actie-tekst:  #FFFFFF;
  --geel:         #F2B000;
  --geel-tekst:   #1A1300;
  --actie-lijn:   #3546D9;
  --actie-zacht:  #E9ECFF;

  --goed:       #1E7F4C;
  --goed-vlak:  #E8F5ED;
  --fout:       #C0392B;
  --fout-vlak:  #FBECEA;
  --amber:      #8A6206;
  --amber-vlak: #FBF2DC;
  --koel:       #10697D;
  --koel-vlak:  #E7F4F7;

  --schaduw-s: 0 1px 2px rgba(16, 26, 38, .06);
  --schaduw-m: 0 1px 2px rgba(16, 26, 38, .05), 0 8px 24px rgba(16, 26, 38, .07);
  --schaduw-l: 0 24px 60px rgba(16, 26, 38, .18);

  --overlay: rgba(16, 26, 38, .72);
}

/* Wie geen keuze heeft gemaakt volgt zijn systeem, maar alleen richting licht
   — donker is immers al de standaard. */
@media (prefers-color-scheme: light) {
  :root:not([data-thema]) {
    color-scheme: light;
    --grond: #EEF1F5; --vlak: #FFFFFF; --vlak-diep: #E5EBF2; --vlak-hover: #DAE3ED;
    --zijbalk: #0F1720;
    --rand: #B6C2CF; --rand-sterk: #8C99A8;
    --tekst: #111A24; --tekst-zacht: #42505F; --tekst-dof: #546475;
    --actie-vlak: #3546D9; --actie-hover: #2A39B8; --actie-tekst: #FFFFFF;
    --actie-lijn: #3546D9; --actie-zacht: #E9ECFF;
    --goed: #1E7F4C; --goed-vlak: #E8F5ED;
    --fout: #C0392B; --fout-vlak: #FBECEA;
    --amber: #8A6206; --amber-vlak: #FBF2DC;
    --koel: #10697D; --koel-vlak: #E7F4F7;
    --schaduw-s: 0 1px 2px rgba(16, 26, 38, .06);
    --schaduw-m: 0 1px 2px rgba(16, 26, 38, .05), 0 8px 24px rgba(16, 26, 38, .07);
    --schaduw-l: 0 24px 60px rgba(16, 26, 38, .18);
    --overlay: rgba(16, 26, 38, .72);
  }
}

/* Wie zijn systeem op minder beweging heeft staan, krijgt minder beweging. */
@media (prefers-reduced-motion: reduce) {
  :root { --snel: 0s; --rustig: 0s; }
}