/*
 * Semantische kleuren — "Champagne Muse" (zand & gedempt goud / koper).
 * Inspiratie: tweakCN "Champagne Muse"; achtergrond rond #FAF3E0, accenten warm goud-koper.
 * Zie ook includes/theme-mode.php (UTF-8, geen BOM op PHP-bestanden).
 */
:root {
  color-scheme: only light;
  --mm-bg-dark: #faf3e0;
  --mm-bg-mid: #f0e6d0;
  --mm-bg-card: #fffdf8;
  --mm-line: #e5dac7;
  --mm-line-strong: #d2c2a4;
  --mm-text: #3a3228;
  --mm-muted: #7a6f62;
  --mm-body: #524a40;
  --mm-heading: #2a241c;
  --mm-link: #8b5a2b;
  --mm-link-hover: #5c3d1c;
  --mm-link-underline: rgba(139, 90, 43, 0.38);
  --mm-accent: #c4a35a;
  --mm-accent-mid: #dfc389;
  --mm-accent-end: #6d4c32;
  --mm-hero-icon: #9a7352;
  --mm-primary-on-accent: #fffdf7;
  --mm-nav-bg: rgba(255, 253, 248, 0.94);
  --mm-hero-bg: rgba(255, 253, 248, 0.97);
  --mm-hero-border: rgba(58, 50, 40, 0.09);
  --mm-page-flow-bg: rgba(245, 236, 218, 0.97);
  --mm-flow-pill-bg: #fffdf8;
  --mm-flow-pill-text: #3a3228;
  --mm-flow-pill-border: #e5dac7;
  --mm-btn-bg: #f2e8d8;
  --mm-back-bg: #fffdf8;
  --mm-shadow: rgba(45, 38, 28, 0.08);
  --mm-glow-1: rgba(196, 163, 90, 0.22);
  --mm-glow-2: rgba(184, 140, 90, 0.14);
  --mm-glow-3: rgba(109, 76, 50, 0.12);
  --mm-glow-4: rgba(196, 163, 90, 0.08);
  --mm-button-border-soft: rgba(58, 50, 40, 0.11);
  --mm-default-button-ring: rgba(58, 50, 40, 0.14);
  --mm-section-highlight-fg: #2a241c;
  --mm-header-fade-top: rgba(250, 243, 224, 0.96);
  --mm-header-fade-bot: rgba(240, 230, 208, 0.72);
  --mm-top-nav-bg: rgba(255, 253, 248, 0.92);
  --mm-top-nav-border: rgba(58, 50, 40, 0.1);
  --mm-flow-strip-border: rgba(58, 50, 40, 0.1);
  --mm-flow-strip-bg: rgba(255, 253, 248, 0.94);
  --mm-primary-btn-shadow: rgba(90, 62, 40, 0.28);
  --mm-nav-hover-fill: rgba(58, 50, 40, 0.07);
  --mm-pulse-ring: rgba(196, 163, 90, 0.42);
  --mm-accent-ring: rgba(154, 115, 82, 0.45);
  --mm-accent-ring-soft: rgba(154, 115, 82, 0.14);
}

/* Secundaire leesregel: vol contrast i.p.v. opacity op <p> */
.mm-muted-lede {
  margin-top: 0.5rem;
  font-size: 0.95rem;
  color: var(--mm-body);
  line-height: 1.55;
}

.mm-muted-lede--spaced {
  margin-top: 0.75rem;
}

.mm-muted-lede a {
  color: var(--mm-link);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.mm-muted-lede a:hover {
  color: var(--mm-link-hover);
}
