/* ==========================================================================
   Designtokens.

   In de oude versie stonden dezelfde hexcodes op een stuk of acht plekken
   verspreid door het stylesheet. Hier staan ze één keer.
   ========================================================================== */

:root {
    /* --- Basiskleuren --- */
    --paars:        #4a3cb5;
    --paars-diep:   #382c8f;
    --paars-licht:  #eef1ff;
    --paars-rand:   #d8ddff;

    --inkt:         #2c2a3d;
    --inkt-zacht:   #6b7192;
    --lijn:         #d8dced;

    --ondergrond:   #f2f5ff;
    --vlak:         #ffffff;

    --goed:         #2ea36b;
    --goed-vlak:    #ddf7e9;
    --mis:          #e0574d;
    --mis-vlak:     #fde3e0;
    --bijna:        #d68a10;
    --bijna-vlak:   #fdf1d8;

    --goud:         #f0c14b;

    /* --- Moduleverlopen --- */
    --v-blauw:     linear-gradient(140deg, #6a7ff0, #7b4fc0);
    --v-groen:     linear-gradient(140deg, #34c98a, #2aa5b8);
    --v-oranje:    linear-gradient(140deg, #f79b1e, #e8632b);
    --v-roze:      linear-gradient(140deg, #ef7ad4, #e8455f);
    --v-regenboog: linear-gradient(140deg, #ef5d5d, #f0b429 40%, #48c78e 70%, #4d7fff);
    --v-limoen:    linear-gradient(140deg, #7cc93f, #3f8f28);
    --v-indigo:    linear-gradient(140deg, #4d6fe0, #7d3fd6);
    --v-turkoois:  linear-gradient(140deg, #35a7e8, #0b7fb5);
    --v-geel:      linear-gradient(140deg, #f0a93c, #e2701f);
    --v-lucht:     linear-gradient(140deg, #4fb0ec, #2f7fd0);
    --v-grijs:     linear-gradient(140deg, #98a0bd, #6d7595);

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

    /* --- Rondingen --- */
    --rond-s: 0.75rem;
    --rond-m: 1.25rem;
    --rond-l: 1.75rem;
    --rond-vol: 999px;

    /* --- Schaduwen --- */
    --schaduw-s: 0 2px 6px rgba(30, 32, 60, .10);
    --schaduw-m: 0 6px 18px rgba(30, 32, 60, .14);
    --schaduw-l: 0 12px 34px rgba(30, 32, 60, .18);

    /* --- Aanraakvlakken ---
       Alles wat een kind moet raken is minstens 64px. Een vierjarige mikt
       niet nauwkeurig. */
    --raak-min: 64px;

    /* --- Typografie --- */
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --t-klein:  0.9rem;
    --t-basis:  1.05rem;
    --t-groot:  clamp(1.4rem, 4vw, 2.1rem);
    --t-reus:   clamp(2rem, 7vw, 3.4rem);
}

/* Kleurvarianten voor kaarten: één attribuut, één verloop. */
[data-kleur="blauw"]     { --kaart-verloop: var(--v-blauw);     --kaart-inkt: #fff; }
[data-kleur="groen"]     { --kaart-verloop: var(--v-groen);     --kaart-inkt: #fff; }
[data-kleur="oranje"]    { --kaart-verloop: var(--v-oranje);    --kaart-inkt: #fff; }
[data-kleur="roze"]      { --kaart-verloop: var(--v-roze);      --kaart-inkt: #fff; }
[data-kleur="regenboog"] { --kaart-verloop: var(--v-regenboog); --kaart-inkt: #fff; }
[data-kleur="limoen"]    { --kaart-verloop: var(--v-limoen);    --kaart-inkt: #fff; }
[data-kleur="indigo"]    { --kaart-verloop: var(--v-indigo);    --kaart-inkt: #fff; }
[data-kleur="turkoois"]  { --kaart-verloop: var(--v-turkoois);  --kaart-inkt: #fff; }
[data-kleur="geel"]      { --kaart-verloop: var(--v-geel);      --kaart-inkt: #fff; }
[data-kleur="lucht"]     { --kaart-verloop: var(--v-lucht);     --kaart-inkt: #fff; }
[data-kleur="pink"]      { --kaart-verloop: var(--v-roze);      --kaart-inkt: #fff; }
[data-kleur="grijs"]     { --kaart-verloop: var(--v-grijs);     --kaart-inkt: #fff; }

/* Alle verlopen dragen nu witte tekst. In de oude versie zetten green,
   orange, teal, lime, yellow en sky donkere tekst op een lichte gradient,
   met wisselend contrast; deze verlopen zijn donkerder gekozen zodat wit
   overal ruim leesbaar is. */