/* Gegenereerd door bouw.mjs uit web/ui.css (het lichte :root-blok, letterlijk) plus de tokens van de site onderaan. Niet met de hand wijzigen; de site kent geen andere kleuren. */
:root{
  --bg:#f4f4f5; --surface:#ffffff; --surface-2:#ececee; --line:#e1e1e4; --line-strong:#c9c9ce;
  --navy:#2a2b2f; --navy-700:#3b3c41; --navy-soft:#ebebed;
  --text:#1c1d20; --text-2:#45464b; --muted:#62636a; --muted-2:#6e6f76;
  --orange:#e8500a; --orange-deep:#c84207; --orange-deeper:#a93705; --orange-text:#b8400a; --orange-soft:#fff1ea;
  --blue:#4a7bd6; --blue-text:#3a66bd; --blue-soft:#eaf0fb;
  --green:#15803d; --green-soft:#dcfce7; --green-text:#166534;
  --red:#dc2626; --red-soft:#fee2e2; --red-text:#b91c1c;
  --purple:#6d28d9; --purple-soft:#ede9fe;
  --amber-soft:#fef3c7; --amber-text:#b45309;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px;
  --r:8px; --r-sm:6px; --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(28,29,32,.06); --shadow-md:0 4px 12px rgba(28,29,32,.08); --shadow-lg:0 16px 40px rgba(28,29,32,.16);
  --t-11:11px; --t-12:12px; --t-13:13px; --t-14:14px; --t-16:16px; --t-18:18px; --t-22:22px; --t-26:26px; --t-32:32px;
  --sidebar:256px; --topbar:56px; --demobar:0px;
  --font:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  /* Rollen van navy: --heading is de tekstkleur (koppen, namen, cijfers), --navy de vulling (actieve nav, navy-knop, nummercirkels), --navy-line de rand of lijn van een gekozen staat */
  --heading:var(--navy); --navy-line:var(--navy); --navy-fill:var(--navy); --on-navy:#fff; --on-navy-muted:rgba(255,255,255,.65);
  /* Vlakken: --card (kaart, knop, lade), --field (invoerveld), --inset (tegel of band binnen een kaart), --col (bordkolom) */
  --card:var(--surface); --field:#ffffff; --inset:var(--bg); --col:var(--surface-2); --mark:#141412; --merk:url(merk/bitzplanner-icon.svg);
  --orange-rand:#fdd3bd; --blue-deep:#2d54a3; --blue-rand:#c6d6f3; --green-rand:#bbf7d0; --red-rand:#fecaca; --red-rand-strong:#fca5a5;
  --purple-text:#6d28d9; --purple-rand:#ddd6fe; --amber-rand:#fde68a; --teal-soft:#ccfbf1; --teal-text:#0f766e; --teal-rand:#99f6e4;
  --plan-bg:#f3f6fc; --plan-rand:#c6d6f3; --plan-dash:#a9c0ea; --today:#fff8f2; --hover-row:#f8f8f9; --skel-hi:#e6e6e9;
  --ring:rgba(74,123,214,.16); --scrim:rgba(28,29,32,.4);
  --cal-blue-b:#a9c0ea; --cal-blue-bg:#e3ecfa; --cal-blue-c:#2d54a3; --cal-green-b:#86efac; --cal-green-bg:#dcfce7; --cal-green-c:#166534;
  --cal-orange-b:#fdba74; --cal-orange-bg:#ffedd5; --cal-orange-c:#9a3412; --cal-red-b:#fca5a5; --cal-red-bg:#fee2e2; --cal-red-c:#991b1b;
  --cal-purple-b:#c4b5fd; --cal-purple-bg:#ede9fe; --cal-purple-c:#5b21b6;
  /* Kleuren van een dienst (13 oktober, Jurgen: meer en duidelijk verschillende kleuren): roze, geel (oker), bruin en limoen, elk met de
     vier tokens van een kleurfamilie. --x is de accentlijn, het bolletje en het staal; --x-text de tekst op --x-soft; --x-rand de rand.
     Gemeten (licht): --x op --surface roze 6,0 · geel 4,9 · bruin 7,7 · limoen 4,9; --x op --x-soft 5,1 · 4,6 · 6,1 · 4,6; --x-text op
     --x-soft 6,7 · 8,1 · 8,4 · 7,9 (op --surface hoger). Onderscheid in de week (CIEDE2000, vulling of accentlijn) minstens 15,9, het
     slechtste bestaande paar (groen en teal). */
  --pink:#be185d; --pink-text:#9d174d; --pink-soft:#fce7f3; --pink-rand:#f9a8d4;
  --yellow:#a16207; --yellow-text:#713f12; --yellow-soft:#fef9c3; --yellow-rand:#facc15;
  --brown:#6f4a3a; --brown-text:#553829; --brown-soft:#ece3dd; --brown-rand:#cdb7a8;
  --lime:#5d7a07; --lime-text:#3d5410; --lime-soft:#f2fcd2; --lime-rand:#c6ef5d;
  /* Logo van een organisatie (8 oktober): --plaat is het lichte vlak achter een overwegend donker logo, --logo-plaat en --logo-plaat-pad
     zetten dat vlak alleen in de donkere stand aan (.avatar.logo.plaat); --paneel-licht en --paneel-donker zijn de twee vlakken van het
     voorbeeld bij het uploaden, in beide standen gelijk. Contrast: antraciet (#2a2b2f) op --plaat 12,2:1. */
  --plaat:#f4f4f5; --logo-plaat:transparent; --logo-plaat-pad:0px; --paneel-licht:#ffffff; --paneel-donker:#19191a;
  /* De gekozen staat op de klantpagina's (11 oktober, golf 1 van de gebruiksvriendelijkheid): een gekozen dag, uur, segment, persoon, sessie
     of verblijf. Licht gelijk aan navy; in het donker werd navy grafiet (#2c2c33) en viel een keuze weg tegen de vrije tegels (#1f1f23), dus
     daar een lichte vulling met donkere tekst. Gemeten: --op-kies op --kies licht 14,2:1 (wit op navy), donker 13,9:1; --kies tegen --inset
     donker 13,0:1 en tegen --card 13,8:1; --heading op --kies-zacht donker 11,2:1. */
  --kies:var(--navy); --op-kies:var(--on-navy); --kies-rand:var(--navy-line); --kies-zacht:var(--navy-soft);
  /* De fotokijker (13 oktober, wens van Jurgen: een foto vergroten op de boekingspagina; web/nachten.js, boek.css .nk-kijker). Een foto
     hoort op een donker vlak, in de lichte en de donkere stand; geen ander token is in beide standen donker en voor iets anders dan het
     voorbeeld van een logo bedoeld. --kijker het vlak over het hele scherm, --kijker-text tekst en iconen, --kijker-soft de vulling van
     een knop, --kijker-rand de rand (en de vulling bij hover). In alle drie de blokken gelijk. Gemeten: --kijker-text op --kijker 17,8:1,
     op --kijker-soft 13,7:1, op --kijker-rand 4,8:1; --kijker-rand tegen --kijker 3,7:1 (rand van een knop, minstens 3:1). */
  --kijker:#0c0c0e; --kijker-text:#f4f4f5; --kijker-soft:#26262b; --kijker-rand:#6b6b75;
}
/* De site: het papier en het vlak van de voet (spacebitz.com). */
:root{
  --papier:#faf7f1; --voet:var(--mark);
  --titaan-1:#d9d3c8; --titaan-2:#a7a196; --titaan-3:#6e6960; --titaan-4:#4a4640; --titaan-5:#2f2c28;
  --alu-1:#f1f1f3; --alu-2:#d6d7da; --alu-3:#b4b6bb; --alu-4:#8d9096; --alu-5:#5f6268;
}