/* 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 {
  /* 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);
}