/* De kleuren van Hypamoon als tokens, voor het portaal (portaal.css) en de
 * inlogschermen (login.css) van app.hypamoon.com.
 *
 * Elke kleur staat er één keer, als light-dark(licht, donker). Welke helft
 * geldt hangt aan color-scheme op de wortel:
 *   - geen keuze of System: `light dark`, en de browser volgt
 *     prefers-color-scheme;
 *   - Light of Dark: alleen die stand.
 * De keuze staat als data-theme op de wortel van de schil (.hm-portaal) of het
 * inlogscherm (.hm-login), door de server uit de cookie hm_thema gezet, dus
 * zonder flits bij het laden (lib/hypamoon/thema.ts).
 *
 * Op :root en niet op .hm-portaal: de vensters, de lade en de toast hangen aan
 * de body en moeten dezelfde tokens erven. Zonder .hm-portaal of .hm-login op
 * de pagina doet dit bestand niets; het komt ook alleen mee in die schermen.
 *
 * De waarden komen uit lib/hypamoon/kleuren.ts; het blok hieronder is
 * gegenereerd en app/(app)/_stijl/hypamoon-tokens.test.ts bewaakt het. Opnieuw
 * schrijven: HYPAMOON_DONKER_SCHRIJF=1 npx vitest run apps/web/app/\(app\)/_stijl/hypamoon-tokens.test.ts
 */

:root:has(.hm-portaal),
:root:has(.hm-login) {
  color-scheme: light dark;
/* === BEGIN GEGENEREERD: lib/hypamoon/kleuren.ts, niet met de hand bewerken === */
  --hm-grond: light-dark(#e9ecef, #0b0d10);
  --hm-zij: light-dark(#e2e6e9, #090b0d);
  --hm-paneel: light-dark(#fbfbfc, #101317);
  --hm-paneel-hoog: light-dark(#ffffff, #121519);
  --hm-hover: light-dark(#eef1f3, #171b20);
  --hm-balk: light-dark(#dde2e6, #1d2228);
  --hm-inkt: light-dark(#15191d, #f4f4f2);
  --hm-inkt-fel: light-dark(#2b3137, #ffffff);
  --hm-inkt-zacht: light-dark(#33393f, #c3c6cb);
  --hm-nav: light-dark(#3d434a, #b4b8be);
  --hm-mist: light-dark(#565c63, #9ba0a7);
  --hm-stil: light-dark(#5c6269, #80868d);
  --hm-lijn: light-dark(rgba(21, 25, 29, 0.13), rgba(255, 255, 255, 0.08));
  --hm-lijn-zacht: light-dark(rgba(21, 25, 29, 0.09), rgba(255, 255, 255, 0.06));
  --hm-lijn-fijn: light-dark(rgba(21, 25, 29, 0.08), rgba(255, 255, 255, 0.05));
  --hm-lijn-sterk: light-dark(rgba(21, 25, 29, 0.26), rgba(255, 255, 255, 0.2));
  --hm-lijn-veld: light-dark(#7f858b, #63686f);
  --hm-accent: light-dark(#2b5f86, #9cc4e4);
  --hm-accent-hover: light-dark(#1f4a6a, #c4dcf0);
  --hm-groen: light-dark(#1d6f45, #7fdcaa);
  --hm-amber: light-dark(#7f540a, #f0c879);
  --hm-rood: light-dark(#b02a20, #ff9a8a);
  --hm-accent-vlak: light-dark(#e6eff7, #0f141a);
  --hm-groen-vlak: light-dark(#e4f3ea, #0f1713);
  --hm-amber-vlak: light-dark(#f8efd9, #14130f);
  --hm-rood-vlak: light-dark(#fbe8e5, #1a1112);
  --hm-schaduw: light-dark(rgba(21, 25, 29, 0.12), rgba(0, 0, 0, 0.45));
  --hm-schaduw-diep: light-dark(rgba(21, 25, 29, 0.16), rgba(0, 0, 0, 0.5));
  --hm-grijs-50: light-dark(#f4f6f7, #121519);
  --hm-grijs-100: light-dark(#eef1f3, #171b20);
  --hm-grijs-200: light-dark(#dde2e6, #23282f);
  --hm-grijs-300: light-dark(#c5cbd0, #2e343c);
  --hm-grijs-400: light-dark(#5c6269, #80868d);
  --hm-grijs-500: light-dark(#565c63, #9ba0a7);
  --hm-grijs-600: light-dark(#454b52, #b4b8be);
  --hm-grijs-700: light-dark(#33393f, #c3c6cb);
  --hm-grijs-800: light-dark(#22272c, #dcdee0);
  --hm-grijs-900: light-dark(#15191d, #f4f4f2);
  --hm-grijs-950: light-dark(#0b0d10, #ffffff);
  --hm-groen-50: light-dark(#ecf7f1, #0f1713);
  --hm-groen-100: light-dark(#d8efe2, #13201a);
  --hm-groen-200: light-dark(#b3dec5, #1f3a2c);
  --hm-groen-300: light-dark(#7cc29c, #3f7a5b);
  --hm-groen-400: light-dark(#1f7348, #5fb488);
  --hm-groen-500: light-dark(#1d6f45, #7fdcaa);
  --hm-groen-600: light-dark(#1a643e, #7fdcaa);
  --hm-groen-700: light-dark(#165636, #7fdcaa);
  --hm-groen-800: light-dark(#12472d, #a6e9c5);
  --hm-groen-900: light-dark(#0e3823, #c8f2db);
  --hm-groen-950: light-dark(#082416, #e4f9ee);
  --hm-amber-50: light-dark(#fbf5e6, #14130f);
  --hm-amber-100: light-dark(#f6eacb, #1d1a12);
  --hm-amber-200: light-dark(#ecd59c, #3a321d);
  --hm-amber-300: light-dark(#d9b468, #8a7444);
  --hm-amber-400: light-dark(#845a0c, #c4a15e);
  --hm-amber-500: light-dark(#7f540a, #f0c879);
  --hm-amber-600: light-dark(#734c09, #f0c879);
  --hm-amber-700: light-dark(#644207, #f0c879);
  --hm-amber-800: light-dark(#523606, #f5d89c);
  --hm-amber-900: light-dark(#3f2a05, #f9e6c0);
  --hm-amber-950: light-dark(#291b03, #fcf3e0);
  --hm-rood-50: light-dark(#fdf0ee, #1a1112);
  --hm-rood-100: light-dark(#fadcd8, #241517);
  --hm-rood-200: light-dark(#f2b8b0, #4a2523);
  --hm-rood-300: light-dark(#e4897d, #a0574e);
  --hm-rood-400: light-dark(#b5382c, #d97b6e);
  --hm-rood-500: light-dark(#b02a20, #ff9a8a);
  --hm-rood-600: light-dark(#a0251c, #ff9a8a);
  --hm-rood-700: light-dark(#8a1f17, #ff9a8a);
  --hm-rood-800: light-dark(#701912, #ffb8ac);
  --hm-rood-900: light-dark(#57130e, #ffd3cb);
  --hm-rood-950: light-dark(#370b08, #ffe9e5);
  --hm-blauw-50: light-dark(#eef4f9, #0f141a);
  --hm-blauw-100: light-dark(#dce8f2, #131b24);
  --hm-blauw-200: light-dark(#b9d0e4, #1f2f40);
  --hm-blauw-300: light-dark(#88afd0, #4c6f8c);
  --hm-blauw-400: light-dark(#33688f, #7aa3c4);
  --hm-blauw-500: light-dark(#2b5f86, #9cc4e4);
  --hm-blauw-600: light-dark(#265579, #9cc4e4);
  --hm-blauw-700: light-dark(#1f4a6a, #9cc4e4);
  --hm-blauw-800: light-dark(#1a3d57, #c4dcf0);
  --hm-blauw-900: light-dark(#142f43, #dbeaf6);
  --hm-blauw-950: light-dark(#0c1d2a, #edf4fb);
/* === EINDE GEGENEREERD === */
}

:root:has(.hm-portaal[data-theme="light"]),
:root:has(.hm-login[data-theme="light"]) {
  color-scheme: light;
}
:root:has(.hm-portaal[data-theme="dark"]),
:root:has(.hm-login[data-theme="dark"]) {
  color-scheme: dark;
}

/* De body erachter: de root-layout zet hem op wit, en zonder deze regel schijnt
   dat door bij het doorveren. */
:root:has(.hm-portaal) body,
:root:has(.hm-login) body {
  background: var(--hm-grond);
}

/* Tijdens het wisselen van stand geen overgangen. Chrome laat een overgang op
   een kleur uit light-dark() op de oude waarde hangen als alleen color-scheme
   verandert (gemeten 13 oktober 2026: knoppen met `transition: color` bleven
   donker in de lichte stand). De kiezer zet data-thema-wissel één frame lang. */
:root:has(.hm-portaal[data-thema-wissel]) *,
:root:has(.hm-login[data-thema-wissel]) * {
  transition: none !important;
}