/* Doelgericht — design tokens (eigen verzoek 2026-09-25: rebrand + "calm teen productivity", met een
   correctie diezelfde dag: light mode moet écht licht zijn, elk vak zijn eigen herkenbare kleur+icoon).
   Eén gedeelde tokenbron voor index.html/admin.html/telefoon.html, geladen vóór hun eigen stylesheet
   (style.css/admin.css/auth.css). Zie UI.md voor de volledige toelichting per token.

   Thema-selector: een expliciete `data-theme` op <html> (src/frontend/theme.ts) wint altijd van de
   systeemvoorkeur; zonder expliciete keuze volgt de app `prefers-color-scheme`. Nooit doorschijnende
   vlakken/backdrop-filter (PROJECT_RULES.md, "Rustig beeld: egale, dekkende kleuren") en nooit puur
   zwart (#000000) als hoofdachtergrond in dark mode. */

:root {
  /* Bibliotheek-identiteit (eigen verzoek 2026-09-26: "premium bibliotheek"): warm perkament als
     achtergrond, ivoor voor kaarten, messing als fijne accentkleur (haarlijnen, actieve markering,
     focus) en een schreefletter voor koppen. */
  --font-display: "DM Sans", system-ui, sans-serif;
  --brass: #2f7a5c;
  --brass-soft: #e3f1e9;
  --brass-line: rgba(31, 90, 68, 0.32);
  /* Sinds de nieuwe UI (2026-09-30) is het "messing" geen bruin meer maar een rustig groen accent: dezelfde tokennamen,
     zodat bestaande regels (eyebrows, focus, haarlijnen) meegaan zonder bruine of klassieke uitstraling.
     --brass-ink als kleine tekst: 6,7:1 op --bg. In donker een lichte mint. */
  --brass-ink: #246248;
  /* Documentscanner op telefoon.html (2026-09-26): het camera- en uitsnedescherm is in beide thema's een
     donkere, dekkende "donkere kamer", zodat de foto het helderste vlak is. Bewust één waarde voor licht
     en donker. */
  --scanner-bg: #0e1612;
  --scanner-bar: #15201a;
  --scanner-ink: #f2ecdc;
  --scanner-line: #d3ab60;

  /* Kernkleuren (light — standaard) */
  --bg: #f7f7f4;
  --surface: #ffffff;
  --surface-soft: #f1f2ee;
  /* In light mode kan niets witter zijn dan --surface, dus --surface-elevated valt hier gewoon samen
     met --surface (het onderscheid doet er pas toe in dark mode) — token wél aanwezig voor wie een
     consistent naamgevingssysteem verwacht (masterprompt 2026-09-25, sectie 5). */
  --surface-elevated: #ffffff;
  --text-primary: #17231e;
  --text-secondary: #56615b;
  --text-muted: #666f6a;
  /* Leesbaarheid (2026-09-26, "letters in donkere modus niet overal leesbaar"): tekst óp een gevulde
     --primary/--danger-knop, leesbare foutmeldingstekst en de placeholder van velden. Eigen tokens,
     zodat nooit meer een vaste `white`/`#a64232` op een donker vlak blijft staan. `color-scheme` laat
     de browser zijn eigen onderdelen (selectlijst, datumkiezer, vinkjes, schuifbalk) in hetzelfde
     thema tekenen. */
  color-scheme: light;
  --on-primary: #ffffff;
  --danger-ink: #a64232;
  --placeholder: #757575;
  --border: #e5e7e2;
  --border-strong: #cfd4cd;

  --primary: #1f5a44;
  --primary-hover: #184a38;
  --primary-soft: #e3f1e9;

  --accent-mint: #7fd6bd;
  --accent-blue: #7cb7ff;
  --accent-purple: #b9a7ff;
  --accent-peach: #ffb38a;
  --accent-teal: #2fb8b1;

  /* Statuskleuren: bewust ANDERS dan --primary/--danger hierboven, ook al lijken groen/rood al op
     "goed"/"fout" — status is een eigen betekenis (systeemmelding), geen merkkleur, en moet dat ook
     blijven als het merkgroen ooit verandert. Rustig gehouden, geen fel/alarmerend geel-oranje. */
  --success: #3f9c6f;
  --success-soft: #e3f5ea;
  --warning: #b98a2e;
  --warning-soft: #faf0dc;

  /* Niet in de vaste lijst van de eigenaar, wel nodig voor een danger-knop en foutmeldingen; rustig
     gehouden (geen fel/alarmerend rood), consistent met de rest van het palet. */
  --danger: #c1584a;
  --danger-hover: #a84739;
  --danger-soft: #fbe6e2;

  /* Vorm/diepte */
  --shadow: 0 1px 2px rgba(16, 28, 22, 0.04), 0 4px 14px rgba(16, 28, 22, 0.05);
  --shadow-lift: 0 2px 4px rgba(16, 28, 22, 0.05), 0 12px 28px rgba(16, 28, 22, 0.09);
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 20px;
  --focus-ring: 0 0 0 3px #2f7a5c;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --motion-fast: 120ms;
  --motion: 180ms;

  /* Vakidentiteit (correctie 2026-09-25): elk herkend vak krijgt een eigen, herkenbare kleur — een
     zeer zachte kaarttint (-tile), een iets steviger vlak achter het icoon (-icon-bg) en een goed
     leesbare icoonkleur (-ink). Nooit een volledig verzadigd kleurvlak; de kaart blijft overwegend wit.
     `default` is de terugval voor een zelf ingetypt vak zonder eigen kleur hierin (neutraal, primary-
     achtig). Sleutels komen overeen met SUBJECT_STYLE_KEY in presentation.ts. */
  --subj-default-tile: var(--surface);
  --subj-default-icon-bg: var(--primary-soft);
  --subj-default-ink: var(--primary-hover);

  --subj-aardrijkskunde-tile: #f3f4f3;
  --subj-aardrijkskunde-icon-bg: rgba(99, 169, 232, 0.16);
  --subj-aardrijkskunde-ink: #3d7dbe;

  --subj-biologie-tile: #f3f6ef;
  --subj-biologie-icon-bg: rgba(85, 185, 141, 0.14);
  --subj-biologie-ink: #3c9770;

  --subj-ckv-tile: #f7f2f3;
  --subj-ckv-icon-bg: rgba(167, 131, 216, 0.16);
  --subj-ckv-ink: #7d57b8;

  --subj-duits-tile: #fcf3ef;
  --subj-duits-icon-bg: rgba(232, 138, 114, 0.16);
  --subj-duits-ink: #c15f45;

  --subj-economie-tile: #f2f6ef;
  --subj-economie-icon-bg: rgba(95, 174, 146, 0.16);
  --subj-economie-ink: #3f8a6e;

  --subj-engels-tile: #f4f4f4;
  --subj-engels-icon-bg: rgba(93, 155, 232, 0.16);
  --subj-engels-ink: #3d74c0;

  --subj-frans-tile: #f5f1f3;
  --subj-frans-icon-bg: rgba(154, 125, 224, 0.16);
  --subj-frans-ink: #7259b8;

  --subj-geschiedenis-tile: #fbf5ef;
  --subj-geschiedenis-icon-bg: rgba(185, 130, 88, 0.16);
  --subj-geschiedenis-ink: #93613a;

  --subj-wiskunde-tile: #fcf6ee;
  --subj-wiskunde-icon-bg: rgba(230, 155, 85, 0.15);
  --subj-wiskunde-ink: #cc7c33;

  --subj-natuurkunde-tile: #f2f4f3;
  --subj-natuurkunde-icon-bg: rgba(76, 146, 217, 0.16);
  --subj-natuurkunde-ink: #2e70b0;

  --subj-scheikunde-tile: #f7f2f2;
  --subj-scheikunde-icon-bg: rgba(149, 107, 182, 0.16);
  --subj-scheikunde-ink: #714a8e;

  --subj-nederlands-tile: #f7f3f4;
  --subj-nederlands-icon-bg: rgba(200, 117, 107, 0.16);
  --subj-nederlands-ink: #a34f45;

  /* "Ga verder met leren"-kaart (correctie 2026-09-25, herontwerp 2026-09-25 met AI-illustratie):
     --hero-bg is de fallback-kleur zolang --hero-image nog laadt; een heel licht, warm-groen verloop
     i.p.v. een vlak wit vlak. --hero-image wijst naar de licht/donker-illustratie (bergpad naar een
     doelpunt/vlag, zie assets/illustrations/METADATA.md voor herkomst) — bewust twee losse bestanden,
     geen CSS-filter over één plaatje, want licht/donker verschillen echt van compositie (dag/nacht). */
  --hero-bg: linear-gradient(120deg, #ffffff 0%, #f3f8f5 60%, #e8f3ec 100%);
  --hero-border: #e5e7e2;
  --hero-shadow: 0 1px 2px rgba(16, 28, 22, 0.04), 0 8px 24px rgba(16, 28, 22, 0.06);
  --hero-image: url("/illustrations/brand/landing-hero.webp");

  /* Zijbalk (correctie 2026-09-25: "Maak de sidebar NIET donker in light mode") — eigen, iets steviger
     leesbare tekstkleur dan het generieke --text-secondary (dat is bewust vlakker, voor bijschriften). */
  --sidebar-bg: #ffffff;
  --sidebar-border: #e8eae5;
  --sidebar-text: #3a4540;
  --sidebar-active-bg: #e8f3ec;
  --sidebar-active-ink: #1a4d39;

  /* "Vak toevoegen"-tegel (correctie 2026-09-25): geen harde stippellijn, een zachte, duidelijk
     niet-ingevulde tegel. */
  --add-tile-bg: #fafaf8;
  --add-tile-border: #cfd4cd;
  --add-tile-icon: #666f6a;
  --add-tile-ink: #56615b;

  /* Zijbalk als zwevende kaart (licht) of vlakke rand-tot-rand-balk (donker), met een gloed rond het
     actieve menu-item in donker; pijlknop op vaktegels (voorbeeldmockups 2026-09-25). */
  --sidebar-inset: 12px;
  --sidebar-radius: 26px;
  --sidebar-shadow: 0 1px 2px rgba(16, 28, 22, 0.04), 0 8px 24px rgba(16, 28, 22, 0.05);
  --sidebar-brand-ink: #1f4a37;
  --nav-active-border: transparent;
  --nav-active-glow: none;
  --tile-arrow-bg: #ffffff;
  --tile-arrow-ink: #17231f;

  /* Soortkleuren van oefenstof-tegels (kaartjes/toets/grammatica/leerblok/topografie), los van het vak: -card = tegelachtergrond, -soft = icoon/label/knop, -ink = tekst/icoon. */
  --kind-cards-card: #f3f6ee; --kind-cards-soft: #d7f0e2; --kind-cards-ink: #2d7a55;
  --kind-tests-card: #f3f3f4; --kind-tests-soft: #dbe8ff; --kind-tests-ink: #2b5cad;
  --kind-grammar-card: #f6f2f4; --kind-grammar-soft: #e6dcff; --kind-grammar-ink: #6242b8;
  --kind-blocks-card: #fbf4e9; --kind-blocks-soft: #ffe6cc; --kind-blocks-ink: #a95f1f;
  --kind-maps-card: #f2f6f1; --kind-maps-soft: #cdeeee; --kind-maps-ink: #1f7a80;

  /* Nieuwe UI voor scholieren (eigen verzoek 2026-09-30, UI.md "Nieuwe UI voor scholieren"): een vaste schaal voor
     ruimte, afronding, tekstgroottes en beweging, zodat componenten geen losse waarden meer verzinnen. */
  --font-sans: "DM Sans", system-ui, sans-serif;
  --font-brand: "Fraunces", Georgia, serif;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --text-page: clamp(28px, 3.4vw, 38px);
  --text-section: 20px;
  --text-card: 17px;
  --text-body: 15px;
  --text-meta: 13px;
  --text-label: 11px;
  --motion-slow: 700ms;
  --content-max: 1160px;
  --shadow-card: 0 1px 2px rgba(16, 28, 22, 0.04), 0 2px 10px rgba(16, 28, 22, 0.04);
  --shadow-hover: 0 2px 4px rgba(16, 28, 22, 0.05), 0 10px 24px rgba(16, 28, 22, 0.08);
  /* Aanbevelingen ("Voor jou"): één accent per soort actie, gedoseerd. -bg kaart, -soft icoonvlak, -ink label/icoon. */
  --rec-repeat-bg: #fdf5e9; --rec-repeat-soft: #fbe7c9; --rec-repeat-ink: #9a5a14;
  --rec-learn-bg: #edf7f2; --rec-learn-soft: #d3eee1; --rec-learn-ink: #25714f;
  --rec-test-bg: #f3f0fc; --rec-test-soft: #e3dcfa; --rec-test-ink: #5f45b5;
  --progress-track: #e9ece7;
  --bottom-nav-bg: #ffffff;
  --image-fallback: linear-gradient(135deg, #eef5f0 0%, #f6f4ee 100%);
}

/* Systeemvoorkeur: alleen toepassen zolang de leerling/ouder zelf nog geen keuze heeft gemaakt
   (geen `data-theme`-attribuut op <html> — zie src/frontend/theme.ts). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #0f1519;
    --surface: #161f24;
    --surface-soft: #1c272d;
    --surface-elevated: #222e35;
    --text-primary: #eef2ef;
    --text-secondary: #aab5b0;
    --text-muted: #8a9690;
    color-scheme: dark;
    --on-primary: #0f1519;
    --danger-ink: #e88f81;
    --placeholder: #8f9a95;
    --border: #26333a;
    --border-strong: #37474f;

    --primary: #5fbb95;
    --primary-hover: #74caa6;
    --primary-soft: #173a2d;

    --accent-mint: #8fe0c8;
    --accent-blue: #8ec4ff;
    --accent-purple: #c6b6ff;
    --accent-peach: #ffc199;
    --accent-teal: #4fdbd6;

    --success: #5fd39a;
    --success-soft: #17332a;
    --warning: #e3b45f;
    --warning-soft: #3a2f18;

    --danger: #e0796a;
    --danger-hover: #e88f81;
    --danger-soft: #3a211d;

    --brass: #7fd1ae;
    --brass-soft: #173a2d;
    --brass-line: rgba(127, 209, 174, 0.4);
    --brass-ink: #8fdcba;

    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.22);
    --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.3), 0 12px 28px rgba(0, 0, 0, 0.34);
    --focus-ring: 0 0 0 3px #7fd1ae;

    --subj-default-tile: var(--surface);
    --subj-default-icon-bg: var(--primary-soft);
    --subj-default-ink: var(--primary-hover);

    --subj-aardrijkskunde-tile: #16283a; --subj-aardrijkskunde-icon-bg: #1d3550; --subj-aardrijkskunde-ink: #8ec4ff;
    --subj-biologie-tile: #133128; --subj-biologie-icon-bg: #1a4939; --subj-biologie-ink: #72d6ad;
    --subj-ckv-tile: #241c36; --subj-ckv-icon-bg: #2e2545; --subj-ckv-ink: #c6b6ff;
    --subj-duits-tile: #331f1b; --subj-duits-icon-bg: #402722; --subj-duits-ink: #f0a78d;
    --subj-economie-tile: #142e26; --subj-economie-icon-bg: #1b3b30; --subj-economie-ink: #7fd1ae;
    --subj-engels-tile: #142a3e; --subj-engels-icon-bg: #1d3b54; --subj-engels-ink: #78b7f3;
    --subj-frans-tile: #241e3a; --subj-frans-icon-bg: #2d2648; --subj-frans-ink: #b69ef0;
    --subj-geschiedenis-tile: #33261e; --subj-geschiedenis-icon-bg: #3f2e22; --subj-geschiedenis-ink: #e0a676;
    --subj-wiskunde-tile: #33271c; --subj-wiskunde-icon-bg: #3f2f20; --subj-wiskunde-ink: #f0ae65;
    --subj-natuurkunde-tile: #142639; --subj-natuurkunde-icon-bg: #1c3350; --subj-natuurkunde-ink: #7fb5ee;
    --subj-scheikunde-tile: #26203a; --subj-scheikunde-icon-bg: #2f2748; --subj-scheikunde-ink: #bc96dc;
    --subj-nederlands-tile: #302238; --subj-nederlands-icon-bg: #3b2a45; --subj-nederlands-ink: #c5a0ea;

    --hero-bg: var(--surface);
    --hero-border: var(--border);
    --hero-shadow: var(--shadow);
    --hero-image: url("/illustrations/brand/hero-dark.webp");

    --sidebar-bg: var(--surface);
    --sidebar-border: var(--border);
    --sidebar-text: var(--text-secondary);
    --sidebar-active-bg: #1b3a2e;
    --sidebar-active-ink: var(--primary-hover);

    --add-tile-bg: var(--surface-soft);
    --add-tile-border: var(--border);
    --add-tile-icon: var(--text-secondary);
    --add-tile-ink: var(--text-secondary);

    --sidebar-inset: 0px;
    --sidebar-radius: 0px;
    --sidebar-shadow: none;
    --sidebar-brand-ink: #eef2ef;
    --nav-active-border: transparent;
    --nav-active-glow: none;
    --tile-arrow-bg: #222e35;
    --tile-arrow-ink: #ffffff;

    /* Soortkleuren van oefenstof-tegels (kaartjes/toets/grammatica/leerblok/topografie), los van het vak: -card = tegelachtergrond, -soft = icoon/label/knop, -ink = tekst/icoon. */
    --kind-cards-card: #15291f; --kind-cards-soft: #1f3d2e; --kind-cards-ink: #78d6a6;
    --kind-tests-card: #16233a; --kind-tests-soft: #203657; --kind-tests-ink: #8db8f5;
    --kind-grammar-card: #221b36; --kind-grammar-soft: #30264d; --kind-grammar-ink: #c1a9f5;
    --kind-blocks-card: #2e2418; --kind-blocks-soft: #43331f; --kind-blocks-ink: #f0b070;
    --kind-maps-card: #142a2c; --kind-maps-soft: #1e4144; --kind-maps-ink: #7fd6da;

    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.28);
    --shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.3), 0 10px 24px rgba(0, 0, 0, 0.3);
    --rec-repeat-bg: #251f18; --rec-repeat-soft: #3a2e1c; --rec-repeat-ink: #f0b872;
    --rec-learn-bg: #152520; --rec-learn-soft: #1d3a2c; --rec-learn-ink: #7fd6ae;
    --rec-test-bg: #1d1a2e; --rec-test-soft: #2d2748; --rec-test-ink: #c1b0fa;
    --progress-track: #26333a;
    --bottom-nav-bg: #161f24;
    --image-fallback: linear-gradient(135deg, #1a2a26 0%, #1c2230 100%);
  }
}

/* Expliciete keuze (via de themaknop, src/frontend/theme.ts) wint altijd, ongeacht systeemvoorkeur. */
:root[data-theme="dark"] {
  --bg: #0f1519;
  --surface: #161f24;
  --surface-soft: #1c272d;
  --surface-elevated: #222e35;
  --text-primary: #eef2ef;
  --text-secondary: #aab5b0;
  --text-muted: #8a9690;
  color-scheme: dark;
  --on-primary: #0f1519;
  --danger-ink: #e88f81;
  --placeholder: #8f9a95;
  --border: #26333a;
  --border-strong: #37474f;

  --primary: #5fbb95;
  --primary-hover: #74caa6;
  --primary-soft: #173a2d;

  --accent-mint: #8fe0c8;
  --accent-blue: #8ec4ff;
  --accent-purple: #c6b6ff;
  --accent-peach: #ffc199;
  --accent-teal: #4fdbd6;

  --success: #5fd39a;
  --success-soft: #17332a;
  --warning: #e3b45f;
  --warning-soft: #3a2f18;

  --danger: #e0796a;
  --danger-hover: #e88f81;
  --danger-soft: #3a211d;

  --brass: #7fd1ae;
  --brass-soft: #173a2d;
  --brass-line: rgba(127, 209, 174, 0.4);
  --brass-ink: #8fdcba;

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.22);
  --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.3), 0 12px 28px rgba(0, 0, 0, 0.34);
  --focus-ring: 0 0 0 3px #7fd1ae;

  --subj-default-tile: var(--surface);
  --subj-default-icon-bg: var(--primary-soft);
  --subj-default-ink: var(--primary-hover);

  --subj-aardrijkskunde-tile: #16283a; --subj-aardrijkskunde-icon-bg: #1d3550; --subj-aardrijkskunde-ink: #8ec4ff;
  --subj-biologie-tile: #133128; --subj-biologie-icon-bg: #1a4939; --subj-biologie-ink: #72d6ad;
  --subj-ckv-tile: #241c36; --subj-ckv-icon-bg: #2e2545; --subj-ckv-ink: #c6b6ff;
  --subj-duits-tile: #331f1b; --subj-duits-icon-bg: #402722; --subj-duits-ink: #f0a78d;
  --subj-economie-tile: #142e26; --subj-economie-icon-bg: #1b3b30; --subj-economie-ink: #7fd1ae;
  --subj-engels-tile: #142a3e; --subj-engels-icon-bg: #1d3b54; --subj-engels-ink: #78b7f3;
  --subj-frans-tile: #241e3a; --subj-frans-icon-bg: #2d2648; --subj-frans-ink: #b69ef0;
  --subj-geschiedenis-tile: #33261e; --subj-geschiedenis-icon-bg: #3f2e22; --subj-geschiedenis-ink: #e0a676;
  --subj-wiskunde-tile: #33271c; --subj-wiskunde-icon-bg: #3f2f20; --subj-wiskunde-ink: #f0ae65;
  --subj-natuurkunde-tile: #142639; --subj-natuurkunde-icon-bg: #1c3350; --subj-natuurkunde-ink: #7fb5ee;
  --subj-scheikunde-tile: #26203a; --subj-scheikunde-icon-bg: #2f2748; --subj-scheikunde-ink: #bc96dc;
  --subj-nederlands-tile: #302238; --subj-nederlands-icon-bg: #3b2a45; --subj-nederlands-ink: #c5a0ea;

  --hero-bg: var(--surface);
  --hero-border: var(--border);
  --hero-shadow: var(--shadow);
  --hero-image: url("/illustrations/brand/hero-dark.webp");

  --sidebar-bg: var(--surface);
  --sidebar-border: var(--border);
  --sidebar-text: var(--text-secondary);
  --sidebar-active-bg: #1b3a2e;
  --sidebar-active-ink: var(--primary-hover);

  --add-tile-bg: var(--surface-soft);
  --add-tile-border: var(--border);
  --add-tile-icon: var(--text-secondary);
  --add-tile-ink: var(--text-secondary);

  --sidebar-inset: 0px;
  --sidebar-radius: 0px;
  --sidebar-shadow: none;
  --sidebar-brand-ink: #eef2ef;
  --nav-active-border: transparent;
  --nav-active-glow: none;
  --tile-arrow-bg: #222e35;
  --tile-arrow-ink: #ffffff;

  /* Soortkleuren van oefenstof-tegels (kaartjes/toets/grammatica/leerblok/topografie), los van het vak: -card = tegelachtergrond, -soft = icoon/label/knop, -ink = tekst/icoon. */
  --kind-cards-card: #15291f; --kind-cards-soft: #1f3d2e; --kind-cards-ink: #78d6a6;
  --kind-tests-card: #16233a; --kind-tests-soft: #203657; --kind-tests-ink: #8db8f5;
  --kind-grammar-card: #221b36; --kind-grammar-soft: #30264d; --kind-grammar-ink: #c1a9f5;
  --kind-blocks-card: #2e2418; --kind-blocks-soft: #43331f; --kind-blocks-ink: #f0b070;
  --kind-maps-card: #142a2c; --kind-maps-soft: #1e4144; --kind-maps-ink: #7fd6da;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.28);
  --shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.3), 0 10px 24px rgba(0, 0, 0, 0.3);
  --rec-repeat-bg: #251f18; --rec-repeat-soft: #3a2e1c; --rec-repeat-ink: #f0b872;
  --rec-learn-bg: #152520; --rec-learn-soft: #1d3a2c; --rec-learn-ink: #7fd6ae;
  --rec-test-bg: #1d1a2e; --rec-test-soft: #2d2748; --rec-test-ink: #c1b0fa;
  --progress-track: #26333a;
  --bottom-nav-bg: #161f24;
  --image-fallback: linear-gradient(135deg, #1a2a26 0%, #1c2230 100%);
}

/* Expliciet "licht" is gelijk aan de standaard :root-waarden hierboven; dit selector-blok bestaat vooral
   zodat "een bewuste keuze" en "nog geen keuze" onderscheidbaar zijn voor theme.ts, niet omdat de
   waarden verschillen. */
:root[data-theme="light"] {
  --bg: #f7f7f4;
  --surface: #ffffff;
}