/* Empire v2: alle tokens, in drie lagen. Bron van waarheid voor de regels: v2/design-system.md.

   Laag 1  :root                  basis (Duolingo-basis, statuskleuren, letters, ruimte)
   Laag 2  [data-palet]  op html  alleen merkkleuren; een sectie mag een eigen palet dragen
   Laag 3  [data-stemming]        oppervlak, vorm, letter en knoppen:
                                  "licht" = Duolingo (Kennisbank), "poster" = Slush (promo)

   Belangrijk: een variabele die naar een andere variabele verwijst, wordt opgelost op het
   element waar hij staat. Zet data-stemming daarom altijd op of onder het element met
   data-palet. Componenten in stijl.css lezen alleen variabelen, nooit hexcodes. */

/* ---------------------------------------------------------------- laag 1: basis */
:root {
  /* Alleen licht (06-10-2026, Android): Chrome op Android (Auto dark mode for web contents) en Samsung Internet
     kleuren een site zelf donker als die dit niet zegt. Samen met de meta in de kop van elke pagina; de bouw
     (scripts/bouw_v2.py) weigert een pagina zonder, scripts/qa_v2_android.mjs bewijst het. */
  color-scheme: only light;

  /* Neutraal (Duolingo, Refero 05-10-2026) */
  --papier: #ffffff;
  --inkt: #000000;
  --middernacht: #000437;        /* donkere vlakken, labels op felle vlakken */
  --kop-tekst: #042c60;          /* Eel Dark Blue: koppen */
  --grafiet: #3c3c3c;            /* structuurranden */
  --tekst: #4b4b4b;              /* Charcoal: lopende tekst, 8,7:1 op wit */
  --tekst-zacht: #737373;        /* Ash donkerder gemaakt: #777777 haalt 4,48:1, dit 4,74:1 */
  --rand-neutraal: #e5e5e5;
  --rand-diep: #c4c4c4;          /* onderrand van vergrendelde knopen */
  --rand-uit: #afafaf;           /* tekst en iconen in uitgeschakelde toestand */
  --vlak-zweef: #f7f7f7;         /* zweefvlak van antwoordkaarten en spookknoppen */
  --limoen: #a5ed6e;             /* Lingot Lime: alleen als 2px rand */
  --nevel: #e9e9e9;              /* Slush Soft Mist: uitgeschakeld */
  --nevel-tekst: #8a8a8a;
  --beton: #cccccc;              /* Slush Concrete Gray */
  --glans: rgb(255 255 255 / 0.32);
  --glans-sterk: rgb(255 255 255 / 0.6);  /* het lichtstreepje over de zwarte voortgangsbalk (lesmodule) */

  /* Statuskleuren: vast, los van het palet (goed groen, fout rood, kiezen blauw) */
  --goed: #58cc02;
  --goed-donker: #4cae02;
  --goed-zacht: #d7ffb8;
  --goed-tekst: #367000;         /* 5,4:1 op goed-zacht */
  --fout: #ff4b4b;
  --fout-donker: #ea2b2b;
  --fout-zacht: #ffdfe0;
  --fout-tekst: #b81818;         /* 5,3:1 op fout-zacht */
  --kies: #1cb0f6;
  --kies-donker: #1899d6;
  --kies-zacht: #ddf4ff;
  --op-status: #000437;          /* label op goed (9,4:1) en fout (5,9:1) */
  /* Lesmodule in poster-stemming (Kennisbank en Leerboek, 05-10-2026): goed is een mintgroen vlak met zwarte
     tekst (12,0:1), fout het zachte rood --fout-zacht met zwarte tekst (17,0:1). Los van het palet. */
  --goed-vlak: #55db9c;
  /* Tellers in kleur (Kerim 05-10): kalender Electric Blue, bliksem Sunburst op zwart, vinkje Mint Pop, elk met
     een pastel tegel eronder (zwarte tekst: 17,7, 18,8 en 18,1 tot 1). Vast, los van het palet. */
  --teller-streak: #4da2ff;
  --teller-xp: #ffd731;
  --teller-klaar: #55db9c;
  --teller-streak-vlak: #dceeff;
  --teller-xp-vlak: #fff3bf;
  --teller-klaar-vlak: #dcf8ea;

  /* Letters (alle OFL, lokaal) */
  --font-nunito: 'Nunito', 'Segoe UI', Arial, sans-serif;
  --font-archivo: 'Archivo', 'Segoe UI', Arial, sans-serif;
  --font-archivo-black: 'Archivo Black', 'Archivo', Arial, sans-serif;
  --font-licht-display: 'Lilita One', 'Nunito', Arial, sans-serif;
  --display-gewicht: 400;

  /* Ruimte: 4px-basis */
  --ruimte-4: 4px;
  --ruimte-8: 8px;
  --ruimte-12: 12px;
  --ruimte-16: 16px;
  --ruimte-20: 20px;
  --ruimte-24: 24px;
  --ruimte-32: 32px;
  --ruimte-40: 40px;
  --ruimte-48: 48px;
  --ruimte-64: 64px;
  --ruimte-80: 80px;
  --ruimte-96: 96px;
  --inhoud-max: 1200px;
  --goot: 16px;

  /* Homepage (stemming promo, Design Loop 05-10-2026). Contrast op wit tenzij anders vermeld. */
  --kop-merk: #e07000;           /* koppen vanaf 21px vet: 3,2:1 (WCAG grote tekst vraagt 3:1) */
  --blauw-tekst: #0e6fac;        /* links en tekst van de tweede knop: 5,4:1 */
  --tekst-op-band: #666666;      /* lopende tekst op band-1: 5,2:1 op #fff3bf, minstens 4,7:1 in elk palet */
  --lucht: #ddf4ff;              /* veld van de scene "leer hoe het zit" */
  --voet-lijn: #262a63;          /* scheidingslijnen op de donkere voet (#000437) */
  --voet-zacht: #c7d0e0;         /* zachte tekst op de donkere voet: 12,6:1 */
  --inhoud-promo: 1000px;        /* twee kolommen van ongeveer 480px, zoals de lat (503 en 473) */

  /* Beweging: alleen transform en opacity (knoppen: filter), uit bij prefers-reduced-motion */
  --snel: 120ms;
  --gewoon: 220ms;
  --veer: cubic-bezier(0.34, 1.56, 0.64, 1);
  --zweef-duur: 300ms;           /* hover van knoppen, kaarten en fotostickers (lat 3) */
  --onthul-duur: 500ms;          /* scroll-onthulling: opacity 0 naar 1 en 24px omhoog */
  --onthul-afstand: 24px;
  --onthul-stap: 120ms;          /* staffeling per kolom */

  /* Drie lagen in de scene (ronde 2): verder weg = kleiner, doorzichtiger, iets vager en trager. */
  --laag-achter-schaal: 0.6;
  --laag-achter-dekking: 0.55;
  --laag-achter-vaag: 1px;
  --laag-midden-schaal: 0.8;
  --laag-midden-dekking: 0.85;
  --laag-voor-schaal: 1;
  --laag-voor-dekking: 1;
  --duik-duur: 6s;               /* één duik: in het scherm, door het glas, buiten, terug */
  --duik-koning-breed: 150%;     /* de koning op zijn verste punt, ten opzichte van de telefoon (smal 115%) */
  --duik-ver-x: 30%;             /* verste punt: zoveel opzij en omhoog, in procenten van de koning zelf */
  --duik-ver-y: -19%;            /* (smal minder ver opzij, zodat hij binnen de band blijft). Compacte scene
                                    (05-10): -19% houdt de koning op zijn verste punt onder de knop. */
  /* Zweven in de scene (ronde 3): op en neer, vóór de laag-schaal. Zichtbaar wordt dat achter 12 px
     (20 x 0,6), midden 13,6 px (17 x 0,8) en voor 15 px. */
  --amp-achter: 20px;
  --amp-midden: 17px;
  --amp-voor: 15px;

  /* Het reuzenwoord EMPIRE (05-10-2026, Kerim): een dunne witte omlijning, zodat de zwarte letters loskomen van
     het zwart omlijnde lint. Zichtbare breedte 2 px op 1280 en breder, 1 px op 375 (vloeiend ertussen). De
     streek is twee keer zo breed: met paint-order: stroke fill valt de binnenste helft onder de letter.
     Oorspronkelijk 2 px op 1280 en 1 px op 375 (clamp(1px, 0.15625vw, 2px)). */
  /* 06-10, Kerim: nog dikker, als een vette omlijning. Zichtbaar 5 px op 1280 en breder, 2,5 px op 375
     (eerst 2 en 1 px, daarna 3 en 1,5 px). */
  --rw-rand: clamp(2.5px, 0.390625vw, 5px);
}
@media (max-width: 639px) { :root { --duik-koning-breed: 115%; --duik-ver-x: 12%; } }
@media (min-width: 640px) { :root { --goot: 24px; } }
@media (min-width: 1100px) { :root { --goot: 32px; } }

/* Tweede optie voor de display van de Kennisbank (keuzepaneel, ?display=fredoka). Staat op
   <html>; :root[...] weegt zwaarder dan :root, dus de volgorde in dit bestand doet er niet toe.
   De display-letter geldt alleen in stemming licht (Kennisbank); het promo-deel houdt
   Archivo Black. */
:root[data-display="fredoka"] {
  --font-licht-display: 'Fredoka', 'Nunito', Arial, sans-serif;
  --display-gewicht: 700;
}

/* ---------------------------------------------------------------- laag 2: paletten
   Tekstkleuren zijn gekozen op contrast (WCAG 2.x, minimaal 4,5:1); de getallen staan erbij.
   Donker = de onderrand van knoppen, ongeveer 1,37:1 ten opzichte van de vulling (zoals
   Duolingo #58cc02 en #4cae02). Bandtekst is altijd zwart. */

:root, [data-palet="refero"] {
  --hoofd: #58cc02;
  --hoofd-donker: #4cae02;
  --hoofd-zacht: #d7ffb8;
  --hoofd-tekst: #000437;        /* 9,4:1 (wit haalt maar 2,1:1) */
  --tweede: #1cb0f6;
  --tweede-donker: #1899d6;
  --tweede-tekst: #000437;       /* 8,0:1 */
  --kroon: #ffd731;
  --band-1: #dceeff;             /* zwart 17,7:1 */
  --band-2: #ffffff;             /* 21:1 */
  --band-3: #cccccc;             /* 13,1:1 */
  --sticker-1: #ffd731;  --sticker-1-tekst: #000000;   /* 15,0:1 */
  --sticker-2: #fb4903;  --sticker-2-tekst: #000000;   /* 6,1:1 */
  --sticker-3: #4da2ff;  --sticker-3-tekst: #000000;   /* 7,9:1 */
  --sticker-4: #55db9c;  --sticker-4-tekst: #000000;   /* 12,0:1 */
  --sticker-5: #e9ccff;  --sticker-5-tekst: #000000;   /* 14,6:1 */
  --sticker-6: #5c4ade;  --sticker-6-tekst: #ffffff;   /* 6,0:1 */
  /* Palet-accent van de lesmodule (Kennisbank en Leerboek): actieve leerpadknoop en de onderrand van een
     gekozen antwoord. Nooit het Duolingo-groen of het felle oranje van --hoofd (Kerim 05-10). */
  --accent: #4da2ff;     --accent-tekst: #000000;     /* 7,9:1 */
}

[data-palet="kroongoud"] {
  --hoofd: #ff9600;
  --hoofd-donker: #d98000;       /* 1,37:1 ten opzichte van de vulling */
  --hoofd-zacht: #ffe4bf;
  --hoofd-tekst: #000437;        /* 9,0:1 */
  --tweede: #1cb0f6;
  --tweede-donker: #1899d6;
  --tweede-tekst: #000437;       /* 8,0:1 */
  --kroon: #ffd731;
  --band-1: #fff3bf;             /* zwart 18,8:1 */
  --band-2: #ffffff;
  --band-3: #f3ead6;             /* 17,6:1 */
  --sticker-1: #ffd731;  --sticker-1-tekst: #000000;   /* 15,0:1 */
  --sticker-2: #fb4903;  --sticker-2-tekst: #000000;   /* 6,1:1 */
  --sticker-3: #4da2ff;  --sticker-3-tekst: #000000;   /* 7,9:1 */
  --sticker-4: #55db9c;  --sticker-4-tekst: #000000;   /* 12,0:1 */
  --sticker-5: #e9ccff;  --sticker-5-tekst: #000000;   /* 14,6:1 */
  --sticker-6: #000000;  --sticker-6-tekst: #ffffff;   /* 21:1 */
  --accent: #4da2ff;     --accent-tekst: #000000;     /* 7,9:1, het blauw van het lint */
}

[data-palet="koningsblauw"] {
  --hoofd: #1cb0f6;
  --hoofd-donker: #1899d6;
  --hoofd-zacht: #ddf4ff;
  --hoofd-tekst: #000437;        /* 8,0:1 */
  --tweede: #ffd731;
  --tweede-donker: #dbb92a;      /* 1,37:1 */
  --tweede-tekst: #000437;       /* 14,0:1 */
  --kroon: #ffd731;
  --band-1: #dceeff;
  --band-2: #ffffff;
  --band-3: #4da2ff;             /* zwart 7,9:1 */
  --sticker-1: #ffd731;  --sticker-1-tekst: #000000;   /* 15,0:1 */
  --sticker-2: #fb4903;  --sticker-2-tekst: #000000;   /* 6,1:1 */
  --sticker-3: #55db9c;  --sticker-3-tekst: #000000;   /* 12,0:1 */
  --sticker-4: #e9ccff;  --sticker-4-tekst: #000000;   /* 14,6:1 */
  --sticker-5: #5c4ade;  --sticker-5-tekst: #ffffff;   /* 6,0:1 */
  --sticker-6: #000000;  --sticker-6-tekst: #ffffff;   /* 21:1 */
  --accent: #4da2ff;     --accent-tekst: #000000;     /* 7,9:1 (sticker 3 is hier mint: dat is goed) */
}

[data-palet="bordeaux-licht"] {
  --hoofd: #a95036;
  --hoofd-donker: #8a3f2a;
  --hoofd-zacht: #f3dcd4;
  --hoofd-tekst: #ffffff;        /* 5,4:1 (Midnight haalt hier maar 3,6:1) */
  --tweede: #b48a4a;
  --tweede-donker: #97743e;      /* 1,37:1 */
  --tweede-tekst: #000437;       /* 6,2:1 */
  --kroon: #b48a4a;
  --band-1: #f6e7e4;             /* zwart 17,5:1 */
  --band-2: #ffffff;
  --band-3: #e8d9ba;             /* 15,1:1 */
  --sticker-1: #54272c;  --sticker-1-tekst: #ffffff;   /* 12,3:1 */
  --sticker-2: #b48a4a;  --sticker-2-tekst: #000000;   /* 6,7:1 */
  --sticker-3: #a95036;  --sticker-3-tekst: #ffffff;   /* 5,4:1 */
  --sticker-4: #e8d9ba;  --sticker-4-tekst: #000000;   /* 15,1:1 */
  --sticker-5: #f7f1e5;  --sticker-5-tekst: #000000;   /* 18,7:1 */
  --sticker-6: #000000;  --sticker-6-tekst: #ffffff;   /* 21:1 */
  --accent: #54272c;     --accent-tekst: #ffffff;     /* 12,3:1, bordeaux (sticker 1); niet de hoofdkleur */
}

/* ---------------------------------------------------------------- laag 3: stemmingen */

/* licht: Duolingo. Wit canvas, één felle hoofdkleur, indrukbare knoppen, radius 12px. */
[data-stemming="licht"] {
  --vlak: var(--papier);
  --vlak-tekst: var(--tekst);
  --kop: var(--kop-tekst);
  --font-display: var(--font-licht-display);
  --font-display-gewicht: var(--display-gewicht);
  --font-ui: var(--font-nunito);
  --tekst-maat: 15px;
  --tekst-regel: 1.47;
  --tekst-gewicht: 500;
  --ui-gewicht: 800;
  --spatie-tekst: 0;
  --spatie-ui: 0.053em;
  --spatie-label: 0.053em;
  --display-regel: 1.2;
  --display-spatie: -0.02em;
  --sectie-ruimte: clamp(64px, 8vw, 100px);
  --radius: 12px;
  --radius-groot: 12px;
  --radius-knop: 12px;
  --radius-sticker: 12px;
  --omlijning: 2px solid var(--rand-neutraal);
  --focus: var(--middernacht);

  /* Knoppen */
  --knop-vlak: var(--hoofd);
  --knop-tekst: var(--hoofd-tekst);
  --knop-onder: var(--hoofd-donker);
  --knop-omlijning: var(--hoofd);
  --knop-rand: 2px;
  --knop-diepte: 3px;
  --knop-diepte-actief: 1px;
  --knop-indruk: 2px;
  --knop-pad-v: 14px;
  --knop-pad-h: 24px;
  --knop-maat: 15px;
  --knop-hoofdletters: uppercase;
  --tweede-knop-vlak: var(--tweede);
  --tweede-knop-tekst: var(--tweede-tekst);
  --tweede-knop-onder: var(--tweede-donker);
  --tweede-knop-omlijning: var(--tweede);
  --spook-vlak: var(--papier);
  --spook-tekst: var(--kop-tekst);
  --spook-onder: var(--rand-neutraal);
  --spook-omlijning: var(--rand-neutraal);
  --spook-zweef: var(--vlak-zweef);
  --knop-uit-vlak: var(--rand-neutraal);
  --knop-uit-tekst: var(--rand-uit);
  --knop-uit-rand: var(--rand-neutraal);
  --knop-zweef-naar: initial;     /* zweven = iets donkerder, richting de onderrand */
}

/* poster: Slush. Pastelbanden, 1px zwart, pilknoppen, één zwarte knop per scherm. */
[data-stemming="poster"] {
  --vlak: var(--band-2);
  --vlak-tekst: var(--inkt);
  --kop: var(--inkt);
  --font-display: var(--font-archivo-black);
  --font-display-gewicht: 400;
  --font-ui: var(--font-archivo);
  --tekst-maat: 16px;
  --tekst-regel: 1.5;
  --tekst-gewicht: 500;
  --ui-gewicht: 700;
  --spatie-tekst: -0.01em;
  --spatie-ui: 0.03em;
  --spatie-label: 0.032em;
  --display-regel: 0.8;
  --display-spatie: 0;
  --sectie-ruimte: 48px;
  --radius: 20px;
  --radius-groot: 40px;
  --radius-knop: 1600px;
  --radius-sticker: 18px;
  --omlijning: 1px solid var(--inkt);
  --focus: var(--inkt);

  /* Knoppen: zwart met witte tekst; spook wit met zwarte rand. Tikdoel minimaal 44px. */
  --knop-vlak: var(--inkt);
  --knop-tekst: var(--papier);
  --knop-onder: var(--inkt);
  --knop-omlijning: var(--inkt);
  --knop-rand: 1px;
  --knop-diepte: 1px;
  --knop-diepte-actief: 1px;
  --knop-indruk: 1px;
  --knop-pad-v: 12px;
  --knop-pad-h: 20px;
  --knop-maat: 14px;
  --knop-hoofdletters: none;
  --knop-zweef-naar: var(--papier);
  --tweede-knop-vlak: var(--sticker-4);
  --tweede-knop-tekst: var(--sticker-4-tekst);
  --tweede-knop-onder: var(--inkt);
  --tweede-knop-omlijning: var(--inkt);
  --spook-vlak: var(--papier);
  --spook-tekst: var(--inkt);
  --spook-onder: var(--inkt);
  --spook-omlijning: var(--inkt);
  --spook-zweef: var(--band-1);
  --knop-uit-vlak: var(--nevel);
  --knop-uit-tekst: var(--nevel-tekst);
  --knop-uit-rand: var(--beton);
}

/* promo: de homepage en (later) de andere promo-pagina's, sinds de Design Loop van 05-10-2026.
   Duolingo vooraan (lat v2/bar.md): wit canvas, koppen in de merkkleur, knoppen van 50px met
   12px radius en een 4px donkerdere onderrand, hover alleen helderder. Van Slush blijven de
   pastelband (band-1) en een paar stickers. Letters: Archivo Black (koppen) en Archivo. */
[data-stemming="promo"] {
  --vlak: var(--papier);
  --vlak-tekst: var(--tekst-zacht);
  --kop: var(--kop-merk);
  --font-display: var(--font-archivo-black);
  --font-display-gewicht: 400;
  --font-ui: var(--font-archivo);
  --tekst-maat: 17px;
  --tekst-regel: 24px;
  --tekst-gewicht: 500;
  --ui-gewicht: 700;
  --spatie-tekst: 0;
  --spatie-ui: 0.8px;
  --spatie-label: 0.8px;
  --display-regel: 1.1;
  --display-spatie: -0.01em;
  --sectie-ruimte: 64px;
  --radius: 16px;
  --radius-groot: 16px;
  --radius-knop: 12px;
  --radius-sticker: 16px;
  --omlijning: 2px solid var(--rand-neutraal);
  --focus: var(--middernacht);

  /* Knoppen (lat 3): gevuld in de merkkleur, 50px hoog, 4px onderrand, geen schaduw. */
  --knop-vlak: var(--hoofd);
  --knop-tekst: var(--hoofd-tekst);
  --knop-onder: var(--hoofd-donker);
  --knop-omlijning: var(--hoofd);
  --knop-rand: 0px;
  --knop-diepte: 4px;
  --knop-diepte-actief: 4px;
  --knop-indruk: 2px;
  --knop-hoogte: 50px;
  --knop-pad-v: 0px;
  --knop-pad-h: 24px;
  --knop-maat: 15px;
  --knop-hoofdletters: uppercase;
  --knop-zweef-naar: var(--knop-vlak);
  --tweede-knop-vlak: var(--tweede);
  --tweede-knop-tekst: var(--tweede-tekst);
  --tweede-knop-onder: var(--tweede-donker);
  --tweede-knop-omlijning: var(--tweede);
  --spook-vlak: var(--papier);
  --spook-tekst: var(--blauw-tekst);
  --spook-onder: var(--rand-neutraal);
  --spook-omlijning: var(--rand-neutraal);
  --spook-zweef: var(--papier);
  --knop-uit-vlak: var(--rand-neutraal);
  --knop-uit-tekst: var(--rand-uit);
  --knop-uit-rand: var(--rand-neutraal);
}