/* ── Thema's van de site (sinds 22/8/2026) ─────────────────────────────────────
   Elke pagina heeft zijn eigen <style>-blok met :root-variabelen (--bg, --card,
   --text, --muted, --accent, --border, ...). Dit bestand wordt door server.js na
   dat blok ingeladen en overschrijft die variabelen per thema. Het thema staat als
   data-thema="..." op de <html>-tag; de server zet het daar op basis van de
   instelling `site_thema` (te kiezen in het admin-scherm, tab Home, kaart Uiterlijk).

   Een thema verandert het kleed (kleuren, lettertype, rondingen), nooit de opbouw
   van de pagina's. Nieuw thema toevoegen = een nieuw html[data-thema="..."]-blok
   hier, plus de naam in THEMAS in server.js.

   Let op: html[data-thema] wint van :root door specificiteit, dus de volgorde van
   laden doet er niet toe. Elementen die in de pagina's een vaste kleur hebben
   (bv. background:#fff op een knop) blijven zoals ze zijn; dat is bewust, het zijn
   bijna allemaal witte vlakken die in elk thema wit mogen blijven.
   ─────────────────────────────────────────────────────────────────────────── */

@import url("https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@400;500;600;700&family=DM+Sans:opsz,wght@9..40,400..700&display=swap");

/* ── Thema "klassiek": exact de kleuren van voor 22/8/2026 (terugvaloptie) ── */
html[data-thema="klassiek"] {
  --bg: #f6f7f9; --card: #fff; --text: #1a1d23; --muted: #6b7280;
  --accent: #4f46e5; --accent-rgb: 79, 70, 229; --accent-soft: #eef2ff;
  --border: #e5e7eb; --green: #16a34a; --green-soft: #dcfce7;
  --red: #dc2626; --red-soft: #fee2e2;
}

/* ── Thema "donkerblauw": witte basis, zachte koele grijzen, veel lucht,
      donker leigrijs-blauw als tekst, heel donker blauw (26 49 95) als accent ── */
html[data-thema="donkerblauw"] {
  --bg: #f5f8fa; --card: #fff; --text: #33475b; --muted: #5c7289;
  --accent: #1a315f; --accent-rgb: 26, 49, 95; --accent-soft: #e8edf5;
  --border: #dfe6ee; --green: #00a38d; --green-soft: #e0f5f1;
  --red: #d9453c; --red-soft: #fdecea;
}
html[data-thema="donkerblauw"] body,
html[data-thema="donkerblauw"] button,
html[data-thema="donkerblauw"] input,
html[data-thema="donkerblauw"] select,
html[data-thema="donkerblauw"] textarea {
  font-family: "Lexend Deca", system-ui, -apple-system, "Segoe UI", sans-serif;
}
html[data-thema="donkerblauw"] body { -webkit-font-smoothing: antialiased; line-height: 1.45; }
/* Titels een tik groter (22/8/2026, vraag Geert): h2 van 15,5 à 17 px naar 19 px, h1
   proportioneel mee van 22 à 24 px naar 27 px. De popups (.pa-card, .ob-toast-card)
   hebben hun eigen maten en blijven erbuiten; op smalle schermen blijft de h1 kleiner. */
html[data-thema="donkerblauw"] h1 { font-size: 27px; letter-spacing: -0.01em; font-weight: 600; }
html[data-thema="donkerblauw"] h2:not(.pa-card h2):not(.ob-toast-card h2) { font-size: 19px; font-weight: 600; }
@media (max-width: 600px) { html[data-thema="donkerblauw"] header h1 { font-size: 22px; } }
/* Kaarten: zachter randje en een lichte schaduw in plaats van een harde lijn */
html[data-thema="donkerblauw"] .card,
html[data-thema="donkerblauw"] .run {
  border-color: var(--border);
  box-shadow: 0 1px 2px rgba(51, 71, 91, .04), 0 4px 14px rgba(51, 71, 91, .05);
}
/* Knoppen: ronder, iets meer lucht, klassieke hover-verdonkering */
html[data-thema="donkerblauw"] .btn,
html[data-thema="donkerblauw"] .ob-btn,
html[data-thema="donkerblauw"] .rl-btn {
  border-radius: 999px; padding-left: 22px; padding-right: 22px; font-weight: 500;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
html[data-thema="donkerblauw"] .btn:not(.ghost):not(.secondary):not(:disabled):hover,
html[data-thema="donkerblauw"] .ob-btn:not(.ghost):not(:disabled):hover { background: #122546; }
html[data-thema="donkerblauw"] .btn.ghost:hover { background: var(--accent-soft); color: var(--accent); }
/* Invoervelden: iets rustiger rand, duidelijke focusring in het accent */
html[data-thema="donkerblauw"] input[type=text],
html[data-thema="donkerblauw"] input[type=password],
html[data-thema="donkerblauw"] input[type=number],
html[data-thema="donkerblauw"] input[type=date],
html[data-thema="donkerblauw"] select,
html[data-thema="donkerblauw"] textarea {
  border-color: var(--border); color: var(--text); background: #fff;
}
html[data-thema="donkerblauw"] input:focus,
html[data-thema="donkerblauw"] select:focus,
html[data-thema="donkerblauw"] textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(26, 49, 95, .15);
}
/* Tabbladen en links krijgen hun accent al via --accent in de pagina's zelf;
   bewust geen algemene a- of .tab-regel hier (planning.html heeft pil-tabs met
   witte tekst op het accent, die zouden anders breken). */
html[data-thema="donkerblauw"] th { color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-size: 11.5px; }

/* ── Thema "paneel" (22/8/2026): de stijl van een hostingbeheerpaneel. Heel lichte
      blauwgrijze achtergrond, witte kaarten met een dun randje en nauwelijks schaduw,
      bijna zwarte tekst, neutraal grijs voor bijschriften, DM Sans als lettertype.
      Het accent blijft het donkerblauw van Geert (geen paars). ── */
html[data-thema="paneel"] {
  --bg: #f2f3f6; --card: #fff; --text: #1d1e20; --muted: #6d7081;
  --accent: #1a315f; --accent-rgb: 26, 49, 95; --accent-soft: #e9edf4;
  --border: #d8dae0; --green: #00b090; --green-soft: #dff5ef;
  --red: #d63163; --red-soft: #fbe4ec;
}
html[data-thema="paneel"] body,
html[data-thema="paneel"] button,
html[data-thema="paneel"] input,
html[data-thema="paneel"] select,
html[data-thema="paneel"] textarea {
  font-family: "DM Sans", Roboto, system-ui, sans-serif;
}
html[data-thema="paneel"] body { -webkit-font-smoothing: antialiased; line-height: 1.5; }
html[data-thema="paneel"] h1 { font-size: 28px; font-weight: 400; letter-spacing: 0; }
html[data-thema="paneel"] h2:not(.pa-card h2):not(.ob-toast-card h2) { font-size: 18px; font-weight: 600; }
html[data-thema="paneel"] .card,
html[data-thema="paneel"] .run { border: 1px solid var(--border); border-radius: 8px; box-shadow: none; }
/* Knoppen: hoekig-rond (8 px), stevig gewicht; hover iets donkerder */
html[data-thema="paneel"] .btn,
html[data-thema="paneel"] .ob-btn,
html[data-thema="paneel"] .rl-btn { border-radius: 8px; font-weight: 600; transition: background-color .15s ease; }
/* Rondleiding (19/9/2026, rondleiding.js): ballon, spotlight en keuzemodal volgen de 8px-hoeken van de kaarten. */
html[data-thema="paneel"] .rl-bal,
html[data-thema="paneel"] .rl-spot,
html[data-thema="paneel"] .rl-modal { border-radius: 8px; }
html[data-thema="paneel"] .btn:not(.ghost):not(.secondary):not(:disabled):hover,
html[data-thema="paneel"] .ob-btn:not(.ghost):not(:disabled):hover { background: #122546; }
html[data-thema="paneel"] .btn.ghost { border-color: var(--border); color: var(--text); }
html[data-thema="paneel"] .btn.ghost:hover { background: var(--accent-soft); }
html[data-thema="paneel"] input[type=text],
html[data-thema="paneel"] input[type=password],
html[data-thema="paneel"] input[type=number],
html[data-thema="paneel"] input[type=date],
html[data-thema="paneel"] select,
html[data-thema="paneel"] textarea { border-color: var(--border); border-radius: 8px; color: var(--text); background: #fff; }
html[data-thema="paneel"] input:focus,
html[data-thema="paneel"] select:focus,
html[data-thema="paneel"] textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(26, 49, 95, .18); }
/* Tabelkoppen: gewone grijze tekst, geen hoofdletters; rijen met dunne scheidingslijnen */
html[data-thema="paneel"] th { color: var(--muted); font-weight: 500; font-size: 13px; }
html[data-thema="paneel"] td { border-bottom-color: #eceef2; }