/* ─────────────────────────────────────────────────────────────────────────
   Theme overlay — gebruikt CSS-variabelen die per actief thema worden
   gezet via <style> in <head> (zie base.html / _jinja_ctx).

   Doel: zonder alle Tailwind classes te herschrijven kunnen we kleuren,
   typografie en achtergrond op site-niveau wisselen.
   ───────────────────────────────────────────────────────────────────── */

/* Alleen toepassen wanneer een non-default theme actief is. We zetten
   `data-theme` op <html>. Het 'modern' thema laat alles met rust. */

html[data-theme="provence"] body,
html[data-theme="rustique"] body {
  background-color: var(--theme-bg);
  color: var(--theme-text);
  font-family: var(--theme-body-font);
  background-image: var(--theme-body-overlay);
  background-attachment: fixed;
}

html[data-theme="provence"] h1,
html[data-theme="provence"] h2,
html[data-theme="provence"] h3,
html[data-theme="rustique"] h1,
html[data-theme="rustique"] h2,
html[data-theme="rustique"] h3 {
  font-family: var(--theme-heading-font);
  font-weight: var(--theme-heading-weight);
  font-style: var(--theme-heading-style);
  letter-spacing: .01em;
}

/* Stone tekstkleuren een tikje warmer trekken */
html[data-theme="provence"] .text-stone-800,
html[data-theme="rustique"] .text-stone-800 { color: var(--theme-text); }
html[data-theme="provence"] .text-stone-700,
html[data-theme="rustique"] .text-stone-700 { color: var(--theme-text); }
html[data-theme="provence"] .text-stone-600,
html[data-theme="rustique"] .text-stone-600 { color: var(--theme-text-soft); }
html[data-theme="provence"] .text-stone-500,
html[data-theme="rustique"] .text-stone-500 { color: var(--theme-text-soft); opacity: .85; }

/* Amber accenten -> theme accent */
html[data-theme="provence"] .text-amber-700,
html[data-theme="provence"] .text-amber-600,
html[data-theme="rustique"] .text-amber-700,
html[data-theme="rustique"] .text-amber-600 { color: var(--theme-accent); }

html[data-theme="provence"] .bg-amber-700,
html[data-theme="rustique"] .bg-amber-700 { background-color: var(--theme-accent); }

html[data-theme="provence"] .bg-amber-50,
html[data-theme="rustique"] .bg-amber-50 { background-color: var(--theme-accent-soft); }

html[data-theme="provence"] .border-amber-100,
html[data-theme="rustique"] .border-amber-100 { border-color: var(--theme-accent-soft); }

/* Kaarten / panelen achtergrond */
html[data-theme="provence"] .bg-white,
html[data-theme="rustique"] .bg-white { background-color: var(--theme-card-bg); }

html[data-theme="provence"] .bg-stone-50,
html[data-theme="rustique"] .bg-stone-50 { background-color: var(--theme-bg-alt); }
html[data-theme="provence"] .bg-stone-100,
html[data-theme="rustique"] .bg-stone-100 { background-color: var(--theme-bg-alt); }

/* Hero-titels iets sierlijker in Provence */
html[data-theme="provence"] h1 { letter-spacing: .02em; }
html[data-theme="provence"] .text-4xl,
html[data-theme="provence"] .text-5xl { font-weight: 500; }

/* Subtiele schaduw + zachte rand op kaarten */
html[data-theme="provence"] .rounded-2xl,
html[data-theme="provence"] .rounded-xl,
html[data-theme="rustique"] .rounded-2xl,
html[data-theme="rustique"] .rounded-xl {
  box-shadow: 0 2px 14px -8px rgba(0,0,0,.12);
}

/* ── Page-specifieke componenten ──────────────────────────────────── */

/* indebuurt.html — weetje-kaarten, copy-btn, badge-dist, cat-labels */
html[data-theme="provence"] .weetje-card,
html[data-theme="rustique"] .weetje-card {
  background: var(--theme-card-bg);
  box-shadow: 0 2px 14px -8px rgba(0,0,0,.12);
}
html[data-theme="provence"] .copy-btn,
html[data-theme="rustique"] .copy-btn {
  background: var(--theme-bg-alt);
  border-color: var(--theme-accent-soft);
  color: var(--theme-accent);
}
html[data-theme="provence"] .copy-btn:hover,
html[data-theme="rustique"] .copy-btn:hover {
  background: var(--theme-accent-soft);
}
html[data-theme="provence"] .badge-dist,
html[data-theme="rustique"] .badge-dist {
  background: var(--theme-accent-soft);
  color: var(--theme-accent);
}
