/* ============================================================
   THEME — Rasing weekend licht/donker
   ------------------------------------------------------------
   Donker (standaard) = de bestaande "stage" stijl (goud op
   middernacht). Licht = de "print" stijl van het design system
   (inkt op champagne, goud als spaarzaam accent).

   De pagina's gebruiken de ruwe kleur-schalen rechtstreeks
   (var(--ink-*), var(--champagne-*), var(--gold-*)). In lichte
   modus draaien we die schalen om, zodat de hele site mee-thema't
   zonder elke inline-stijl aan te raken:
     • ink-schaal  (donkere achtergronden)  -> papier/grijs
     • champagne   (lichte tekst)           -> inkt
     • gold        (accent/koppen)          -> dieper, leesbaar goud
   Tokens met een dubbele rol (tekst-op-goud / tekst-op-rood) en
   de gedeelde nav krijgen gerichte overrides hieronder.
   ============================================================ */

html.theme-light {
  color-scheme: light;

  /* ---- INK-schaal -> papier & lichtgrijs (achtergronden/vlakken) ---- */
  --ink-950: #ECE3D2;   /* diepste pagina-achtergrond */
  --ink-900: #F4ECDF;   /* basisvlak / nav (nav wordt apart gezet) */
  --ink-850: #F7F0E4;
  --ink-800: #FFFFFF;   /* kaarten / inputs */
  --ink-700: #F1E7D6;   /* hover / verhoogd vlak */
  --ink-600: #E3D8C2;
  --ink-500: #CBBEA2;
  --ink-400: #9A917E;   /* faint */

  /* ---- CHAMPAGNE-schaal -> inkt (voorgrond/tekst) ----
     LET OP: champagne-50 blijft licht (tekst op goud/rood).      */
  --champagne-50:  #FBF6EC;
  --champagne-100: #1B1A17;   /* primaire tekst */
  --champagne-200: #2C2A24;
  --champagne-300: #585248;   /* gedimde tekst */
  --champagne-400: #7A7568;

  /* ---- GOLD-schaal -> dieper goud, leesbaar op papier ---- */
  --gold-200: #B8922A;
  --gold-300: #9A7B1E;
  --gold-400: #876A18;
  --gold-500: #7E6418;
  --gold-600: #6E5616;
  --gold-700: #5E4912;
  --gold-800: #463709;

  /* ---- Gradiënten -> papier ---- */
  --grad-stage: linear-gradient(180deg, #FBF6EC 0%, #F1E8D8 100%);
  --grad-spotlight: radial-gradient(60% 80% at 50% -10%, rgba(255,244,214,.45) 0%, transparent 72%);
  --grad-paper: linear-gradient(180deg, #FBF6EC 0%, #F1E8D8 100%);

  /* ---- Dubbele-rol tokens vastzetten (tekst op goud/donker) ---- */
  --text-on-gold: #1B1A17;
  --on-foil: #1B1A17;
  --text-on-dark: #1B1A17;
  --text-on-dark-dim: #585248;

  /* ---- Schaduwen iets zachter op papier ---- */
  --shadow-md: 0 8px 24px rgba(27,26,23,.12);
  --shadow-lg: 0 18px 44px rgba(27,26,23,.16);
}

/* Print-pagina's: het donkergrijze frame rond het A4-vel wordt papier */
html.theme-light { background: var(--ink-950); }

/* Motieven & logo's worden inkt in lichte modus (print-stijl van het DS) */
html.theme-light img[src*="motif-"],
html.theme-light img[src*="logo-"] {
  filter: brightness(0) saturate(0);
}

/* ============================================================
   GEDEELDE NAVIGATIE (#hn) — gerichte light-overrides
   Hogere specificiteit dan de per-pagina inline <style>.
   ============================================================ */
html.theme-light #hn {
  background: var(--champagne-50);
  border-bottom-color: rgba(140,110,30,.22);
}
html.theme-light #hn .hn-logo { color: var(--gold-700); }
html.theme-light #hn .hn-div  { background: rgba(27,26,23,.16); }
html.theme-light #hn .hn-link { color: var(--neutral-600); }
html.theme-light #hn .hn-link:hover { color: var(--gold-700); }
html.theme-light #hn .hn-link.on {
  color: var(--gold-700);
  background: rgba(140,110,30,.10);
  border-color: rgba(140,110,30,.30);
}

/* ============================================================
   TEKST OP GOUD-FOLIE — moet donker blijven (gedeelde klassen)
   ============================================================ */
html.theme-light .btn-gold,
html.theme-light .print-btn,
html.theme-light .sec-no { color: #1B1A17 !important; }

/* ============================================================
   THEME-TOGGLE KNOP (geïnjecteerd in #hn door theme.js)
   ============================================================ */
.hn-theme-toggle {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid rgba(212,175,55,.30);
  color: var(--gold-500);
  border-radius: 2px;
  padding: 6px 11px;
  cursor: pointer;
  font-family: var(--font-deco);
  font-size: 8px;
  letter-spacing: .22em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  transition: color .15s, border-color .15s, background .15s;
  -webkit-tap-highlight-color: transparent;
}
.hn-theme-toggle:hover { color: var(--gold-300); border-color: rgba(212,175,55,.55); }
.hn-theme-toggle:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-ring); }
.hn-theme-toggle svg { width: 13px; height: 13px; }

/* icoon + label wisselen per modus: donker toont zon ("Licht"),
   licht toont maan ("Donker") */
.hn-theme-toggle .ic-moon,
.hn-theme-toggle .lbl-dark { display: none; }
html.theme-light .hn-theme-toggle .ic-sun,
html.theme-light .hn-theme-toggle .lbl-light { display: none; }
html.theme-light .hn-theme-toggle .ic-moon { display: inline-block; }
html.theme-light .hn-theme-toggle .lbl-dark { display: inline; }

/* toggle-kleuren in lichte modus */
html.theme-light #hn .hn-theme-toggle {
  color: var(--gold-700);
  border-color: rgba(140,110,30,.40);
}
html.theme-light #hn .hn-theme-toggle:hover {
  color: var(--gold-800);
  border-color: var(--gold-700);
}

@media print {
  .hn-theme-toggle { display: none !important; }
}

/* ============================================================
   LEESBAARHEID — contrast & minimale tekstgrootte
   ------------------------------------------------------------
   De pagina's gebruiken veel dunne Poiret-labels op 7–9px met
   lichtgoud/laag contrast. Hieronder lichten we het faint-goud op
   (donkere modus) en zetten we een leesbare ondergrens voor de
   gedeelde label-klassen — site-breed via dit ene bestand.
   ============================================================ */

/* --- Contrast: faint goud oplichten in DONKERE modus --- */
html:not(.theme-light) {
  --gold-700: #BE9838;   /* kickers/labels: was #8C6E1E (te donker) */
  --gold-800: #8C6E1E;   /* fijne lijnen/stippen: was #5E4912 */
  --text-on-dark-dim: var(--champagne-200);  /* iets helderder gedimde tekst */
}

/* Navigatielinks beter leesbaar (beide modi) */
#hn .hn-link { font-size: 10px; }
html:not(.theme-light) #hn .hn-link { color: #C7A741; }
html:not(.theme-light) #hn .hn-link:hover,
html:not(.theme-light) #hn .hn-link.on { color: var(--gold-300); }

/* Faint "rgba goud" sectielabels & accenten leesbaarder */
.section-label span { color: var(--gold-600) !important; }

/* --- Minimale grootte voor de kleinste gedeelde labels ---
   (8–9px Poiret -> 11px; ruimer leesbaar zonder de hiërarchie
   van de grote koppen aan te tasten) */
.stat-l,
.info-label,
.punt-label,
.legend-label,
.portal-kicker,
.section-label span,
.status-badge,
.legend-item,
.nav-btn,
.tab-btn {
  font-size: 11px !important;
  letter-spacing: .2em !important;
}

/* Body-/omschrijvingstekst een fractie groter & rustiger */
.portal-desc,
.hub-desc,
.opt-desc,
.org-members { font-size: 14px !important; line-height: 1.7 !important; }

/* ============================================================
   MOBIEL — compacte nav, geen horizontale overflow
   ============================================================ */
html, body { -webkit-text-size-adjust: 100%; }
img, svg, table { max-width: 100%; }

@media (max-width: 600px) {
  #hn { padding-left: 12px; padding-right: 12px; }
  #hn .hn-logo { margin-right: 8px; font-size: 15px; }
  #hn .hn-div { margin: 0 6px; }
  #hn .hn-link { padding: 7px 8px; letter-spacing: .14em !important; }
  .hn-theme-toggle { padding: 6px 9px; }
  /* labels op smal scherm net iets compacter qua spatiëring */
  .stat-l, .info-label, .punt-label, .legend-label,
  .portal-kicker { letter-spacing: .16em !important; }
}