/* ══════════════════════════════════════════════════════════════════════
   THEMA — donker (standaard) en licht
   Wordt door elke pagina geladen, ná /styles.css.

   Alleen structurele kleuren staan hier: achtergrond, tekst, randen en het
   platinum accent. Kleurstalen (marmer, eiken, mat zwart, de kleurenwaaier)
   zijn inhoud en blijven in beide thema's exact gelijk.

   Het platinum #C8BFB0 haalt op wit maar 1,7:1 contrast. In licht thema
   wordt het daarom de donkerdere bronstint #7A6A52 (5,0:1 — WCAG AA).
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --bg: #0C0A09;          --bg-rgb: 12,10,9;
  --bg-2: #12100E;        --bg-3: #1C1917;
  --bg-warm: #1a1614;
  --tekst-rgb: 255,255,255;
  --accent: #C8BFB0;      --accent-rgb: 200,191,176;
  --goud-1: #B0A898; --goud-2: #E8E2D8; --goud-3: #D4CEC6; --goud-4: #C8BFB0;
  --knop-bg: linear-gradient(135deg, #B8B0A4, #E8E2D8, #C8BFB0);
  --knop-rand: linear-gradient(135deg, #B0A898, #E8E2D8 40%, #C8BFB0);
  --knop-tekst: #1a1816;      --knop-tekst-rgb: 26,24,22;
  --knop-tekst-om: #F5F0E8;   --knop-tekst-om-rgb: 245,240,232;
  --knop-kleuren-bg: linear-gradient(135deg, #B8B0A4, #E8E2D8 45%, #C8BFB0);
  --knop-kleuren-tekst: #1A1714;
  --knop-vlak-bg: linear-gradient(135deg, #B8B0A4, #E8E2D8 40%, #C8BFB0);
  --kaart-bg: rgba(38,34,31,0.75);
  --stap-bg: rgba(45,40,37,0.85);
  --bento-bg: linear-gradient(145deg, rgba(28,25,23,0.9) 0%, rgba(18,15,13,0.95) 100%);
  --rail-accent: #F3E2B8;
  --rail-kaart: #171412;
  --pin-gloed: 243,226,184,0.7;
  --pin-actief: #FFF6E0;
  --schaduw-rgb: 0,0,0;
  --schaduw-sterk: 0.6;
  --schaduw-zacht: 0.5;
  --stip-alpha: 0.08;
  --cijfer-alpha: 0.07;
  --cijfer-alpha-hover: 0.14;
  --stapnr-alpha: 0.15;
  --stapnr-alpha-hover: 0.5;
  /* Doorzichtigheid van zachte tekst. Wit op 55% leest op zwart prima, maar
     zwart op 55% haalt op wit maar 4,0:1 — te weinig. Vandaar per trede een
     eigen waarde voor licht thema; alle lichte waarden halen 4,5:1+. */
  --overlay-bg: rgba(8,6,5,0.92);
  --t30: 0.30; --t35: 0.35; --t45: 0.45; --t50: 0.50; --t55: 0.55; --t60: 0.60;
}

html[data-thema="licht"] {
  --bg: #FBF9F6;          --bg-rgb: 251,249,246;
  --bg-2: #F3EFE9;        --bg-3: #FFFFFF;
  --bg-warm: #F1ECE4;
  --tekst-rgb: 26,23,20;
  --accent: #7A6A52;      --accent-rgb: 122,106,82;
  --goud-1: #8C7A5C; --goud-2: #6E6050; --goud-3: #7F6E56; --goud-4: #9A8768;
  --knop-bg: linear-gradient(135deg, #2A2522, #1A1714);
  --knop-rand: linear-gradient(135deg, #2A2522, #3A332E 40%, #1A1714);
  --knop-tekst: #F5F0E8;      --knop-tekst-rgb: 245,240,232;
  --knop-tekst-om: #2A2522;   --knop-tekst-om-rgb: 42,37,34;
  --knop-kleuren-bg: linear-gradient(135deg, #2A2522, #1A1714);
  --knop-kleuren-tekst: #F5F0E8;
  --knop-vlak-bg: linear-gradient(135deg, #2A2522, #1A1714);
  --kaart-bg: rgba(255,255,255,0.88);
  --stap-bg: rgba(255,255,255,0.92);
  --bento-bg: linear-gradient(145deg, rgba(255,255,255,0.96) 0%, rgba(246,242,235,0.98) 100%);
  --rail-accent: #7A6A52;
  --rail-kaart: #FFFFFF;
  --pin-gloed: 122,106,82,0.55;
  --pin-actief: #3A3227;
  --schaduw-rgb: 26,23,20;
  --schaduw-sterk: 0.14;
  --schaduw-zacht: 0.10;
  --stip-alpha: 0.16;
  --cijfer-alpha: 0.16;
  --cijfer-alpha-hover: 0.30;
  --stapnr-alpha: 0.26;
  --stapnr-alpha-hover: 0.6;
  --overlay-bg: rgba(251,249,246,0.95);
  --t30: 0.62; --t35: 0.63; --t45: 0.66; --t50: 0.67; --t55: 0.70; --t60: 0.74;
}

/* ── Altijd donker ──
   De hero is een donkere video met witte tekst erover, en de kaart in
   #werkgebied is met de hand in donkere kleuren getekend: geen chroom maar
   beeld. Dat geldt ook voor de beeldbanner van de webshop. Die houden
   hun donkere tokens. Hetzelfde geldt voor de
   navigatiebalk zolang er niet gescrold is — die zweeft dan transparant
   boven de hero-video, dus donkere letters zouden daar onleesbaar zijn. */
html[data-thema="licht"] #hero,
html[data-thema="licht"] #werkgebied,
html[data-thema="licht"] .shop-hero,
html[data-thema="licht"] .heeft-hero #navbar:not(.scrolled) {
  --bg: #0C0A09;          --bg-rgb: 12,10,9;
  --bg-2: #12100E;        --bg-3: #1C1917;
  --tekst-rgb: 255,255,255;
  --accent: #C8BFB0;      --accent-rgb: 200,191,176;
  --goud-1: #B0A898; --goud-2: #E8E2D8; --goud-3: #D4CEC6; --goud-4: #C8BFB0;
  --knop-bg: linear-gradient(135deg, #B8B0A4, #E8E2D8, #C8BFB0);
  --knop-rand: linear-gradient(135deg, #B0A898, #E8E2D8 40%, #C8BFB0);
  --knop-tekst: #1a1816;      --knop-tekst-rgb: 26,24,22;
  --knop-tekst-om: #F5F0E8;   --knop-tekst-om-rgb: 245,240,232;
  --kaart-bg: rgba(38,34,31,0.75);
  --schaduw-rgb: 0,0,0;
  --schaduw-sterk: 0.6;
  --schaduw-zacht: 0.5;
  --stip-alpha: 0.08;
}
/* 'color' erft als berekende waarde van <body>; binnen deze panelen moet
   hij opnieuw uit de tokens worden gelezen. */
#hero, #werkgebied, .shop-hero, #navbar { color: rgb(var(--tekst-rgb)); }

/* ══════════════════════════════════════
   Tailwind-overrides
   /styles.css is een gecompileerde Tailwind-build zonder config: daarin
   staan deze klassen als vaste rgb()-waarden. Hier worden ze in licht
   thema opnieuw gedefinieerd via de tokens. De alfa-trap is een andere
   dan in donker thema: wit-op-55% leest op zwart prima, maar levert op
   wit maar 4,0:1 op — te weinig. Deze waarden halen allemaal 4,5:1+.
   ══════════════════════════════════════ */
html[data-thema="licht"] .text-white      { color: rgb(var(--tekst-rgb)); }
html[data-thema="licht"] .text-white\/85  { color: rgba(var(--tekst-rgb),0.9); }
html[data-thema="licht"] .text-white\/80  { color: rgba(var(--tekst-rgb),0.88); }
html[data-thema="licht"] .text-white\/75  { color: rgba(var(--tekst-rgb),0.84); }
html[data-thema="licht"] .text-white\/70  { color: rgba(var(--tekst-rgb),0.8); }
html[data-thema="licht"] .text-white\/65  { color: rgba(var(--tekst-rgb),0.76); }
html[data-thema="licht"] .text-white\/60  { color: rgba(var(--tekst-rgb),0.74); }
html[data-thema="licht"] .text-white\/55  { color: rgba(var(--tekst-rgb),0.7); }
html[data-thema="licht"] .text-white\/50  { color: rgba(var(--tekst-rgb),0.66); }
html[data-thema="licht"] .border-white\/30 { border-color: rgba(var(--tekst-rgb),0.3); }
html[data-thema="licht"] .border-white\/10 { border-color: rgba(var(--tekst-rgb),0.1); }
html[data-thema="licht"] .border-white\/5  { border-color: rgba(var(--tekst-rgb),0.05); }
/* Het accent is in licht thema al donkerder; op 70-80% zakt het alsnog
   onder de leesbaarheidsgrens, dus daar vol doorzetten. */
html[data-thema="licht"] .text-gold      { color: var(--accent); }
html[data-thema="licht"] .text-gold\/80  { color: var(--accent); }
html[data-thema="licht"] .text-gold\/70  { color: var(--accent); }
html[data-thema="licht"] .border-gold\/40 { border-color: rgba(var(--accent-rgb),0.4); }
html[data-thema="licht"] .border-gold\/30 { border-color: rgba(var(--accent-rgb),0.3); }
html[data-thema="licht"] .border-gold\/10 { border-color: rgba(var(--accent-rgb),0.1); }
html[data-thema="licht"] .bg-gold\/15 { background-color: rgba(var(--accent-rgb),0.15); }
html[data-thema="licht"] .bg-dark     { background-color: var(--bg); }
html[data-thema="licht"] .text-red-400 { color: #B91C1C; }

/* ══════════════════════════════════════
   De schakelknop zelf
   ══════════════════════════════════════ */
.thema-knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(var(--accent-rgb),0.30);
  background: rgba(var(--accent-rgb),0.08);
  color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .25s, border-color .25s, color .25s, transform .25s;
}
.thema-knop:hover {
  background: rgba(var(--accent-rgb),0.18);
  border-color: rgba(var(--accent-rgb),0.55);
  transform: translateY(-1px);
}
.thema-knop:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* In donker thema wijst de knop naar licht (zon), in licht naar donker (maan). */
.thema-knop .thema-maan { display: none; }
html[data-thema="licht"] .thema-knop .thema-zon  { display: none; }
html[data-thema="licht"] .thema-knop .thema-maan { display: block; }