/* Koken met Chantal — centrale kleurset gebaseerd op de homepage */
:root {
  --kmc-brand-deep: #0a7a3c;
  --kmc-brand-deeper: #0a7a3c;
  --kmc-brand-green: #0a7a3c;
  --kmc-brand-bright: #00a93d;
  --kmc-brand-leaf: #7dcf8a;
  --kmc-brand-mint: #d8efdf;
  --kmc-brand-soft: #e8f4ef;
  --kmc-brand-cream: #fffdf6;
  --kmc-brand-line: rgba(17, 60, 43, .14);
  --kmc-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --kmc-text: #17241e;
  --kmc-muted: #52695d;
  --kmc-on-green: #ffffff;
  --kmc-on-green-muted: rgba(255, 255, 255, .92);

  accent-color: var(--kmc-brand-green);
}

/* De homepage blijft het kleuranker; alle onderliggende pagina's volgen
   het heldere homepagegroen voor hun zichtbare merkvlakken. */
:root:not(.kmc-home) {
  --ink: var(--kmc-text) !important;
  --muted: var(--kmc-muted) !important;
  --green: var(--kmc-brand-deep) !important;
  --green-2: var(--kmc-brand-green) !important;
  --green-deep: var(--kmc-brand-deeper) !important;
  --green-mid: var(--kmc-brand-green) !important;
  --green-soft: var(--kmc-brand-soft) !important;
  --leaf: var(--kmc-brand-green) !important;
  --deep: var(--kmc-brand-deeper) !important;
  --deep-2: var(--kmc-brand-green) !important;
  --mint: var(--kmc-brand-mint) !important;
  --brass: var(--kmc-brand-mint) !important;
  --line: var(--kmc-brand-line) !important;

  --buy-green: var(--kmc-brand-deep) !important;
  --buy-leaf: var(--kmc-brand-green) !important;
  --buy-soft: var(--kmc-brand-soft) !important;
  --shop-green: var(--kmc-brand-deep) !important;
  --shop-mid: var(--kmc-brand-green) !important;
  --shop-soft: var(--kmc-brand-soft) !important;

  --quiz-green: var(--kmc-brand-deep) !important;
  --quiz-leaf: var(--kmc-brand-green) !important;
  --quiz-mint: var(--kmc-brand-mint) !important;
  --lab-green: var(--kmc-brand-deep) !important;
  --lab-ink: var(--kmc-text) !important;
  --lab-mid: var(--kmc-brand-green) !important;
  --lab-mint: var(--kmc-brand-mint) !important;
  --lab-pale: var(--kmc-brand-soft) !important;

  --groen: var(--kmc-brand-deep) !important;
  --groen-mid: var(--kmc-brand-green) !important;
  --groen-licht: var(--kmc-brand-mint) !important;
  --groen-bg: var(--kmc-brand-soft) !important;
  --groen-zacht: #f4f8f2 !important;

}

html { scrollbar-color: var(--kmc-brand-green) var(--kmc-brand-soft); }
::selection { background: var(--kmc-brand-mint); color: var(--kmc-brand-deep); }

/* Eén moderne typografie op de complete website, zonder sierlijke serif-koppen. */
html,
body,
body * {
  font-family: var(--kmc-font-sans) !important;
}

html body :is(h1, h2, h3, h4, h5, h6, .display) {
  font-style: normal !important;
  font-weight: 800 !important;
  line-height: 1.04 !important;
  letter-spacing: -.035em !important;
}

html body :is(h1, h2, h3, h4, h5, h6) :is(em, i) {
  font-style: normal !important;
  font-weight: inherit !important;
}

html body .app-intro h1,
html body .question-step h3,
html body .result-panel h3 {
  font-family: var(--kmc-font-sans) !important;
  font-style: normal !important;
  font-weight: 800 !important;
  line-height: 1.04 !important;
}

/* Leesbare secundaire tekst op het heldere merkvlak. */
html body :is(
  .seo-cta,
  .final-cta,
  .buy-cta,
  .process,
  .craft-copy,
  .official-note,
  .order-flow,
  .choice-card.dark,
  .package.featured,
  .dark-band,
  .day-section,
  .quiz-aside,
  .support-card,
  .cta,
  .order-head
) :is(p, li, small, span, .lead, .section-copy, .privacy-note) {
  color: var(--kmc-on-green-muted) !important;
}

/* De homepage gebruikt witte kaarten binnen een lichte trust-sectie. Deze
   tekst mag daarom niet de algemene witte tekstkleur van groene banden erven. */
html body .trust-card span {
  color: var(--kmc-muted) !important;
}

/* Ook de laatste oude donkergroene contentband volgt het heldere homepagegroen. */
html body .dark-band {
  background:
    radial-gradient(circle at 78% 20%, rgba(216, 239, 223, .18), transparent 30%),
    var(--kmc-brand-green) !important;
}

html body :is(
  .hero-copy,
  .buy-lead,
  .buy-trust,
  .quiz-lead,
  .week-intro > p,
  .hero-fact span,
  .hero-card-line
) {
  color: var(--kmc-on-green-muted) !important;
}

html body :is(.footer, .lab-footer, .buy-footer, .db-footer, footer) {
  color: var(--kmc-on-green-muted) !important;
}

html body :is(.footer, .lab-footer, .buy-footer, .db-footer, footer) * {
  color: var(--kmc-on-green-muted) !important;
  opacity: 1 !important;
}

html body :is(.footer, .lab-footer, .buy-footer, .db-footer, footer) :is(a, strong, h2, h3) {
  color: var(--kmc-on-green) !important;
}

html body .final-cta .button.outline {
  color: #fff !important;
  border-color: rgba(255, 255, 255, .64) !important;
  background: rgba(255, 255, 255, .08) !important;
}

html body .final-cta .button.outline:hover,
html body .final-cta .button.outline:focus-visible {
  color: var(--kmc-brand-green) !important;
  background: #fff !important;
}

html body :focus-visible {
  outline: 3px solid #7dcf8a;
  outline-offset: 3px;
}

@media (forced-colors: active) {
  :root { --kmc-brand-line: CanvasText; }
}