/* ===========================================================================
   Buro Inzicht — Color schemes
   Sections are painted by applying ONE scheme class to the section element.
   Each scheme exposes --scheme-bg / --scheme-text / --scheme-accent /
   --scheme-border so children inherit the correct contrast automatically.
   Alternate light/dark schemes down a page to create rhythm.
   =========================================================================== */

.scheme-1,
.scheme-2,
.scheme-3,
.scheme-4,
.scheme-5,
.scheme-6,
.scheme-7 {
  background-color: var(--scheme-bg);
  color: var(--scheme-text);
}

/* Scheme 1 — Charcoal (default dark) ·············· logo: light ··· */
.scheme-1 {
  --scheme-bg: var(--color-neutral-darker);
  --scheme-text: var(--color-white);
  --scheme-accent: var(--color-old-gold);
  --scheme-border: var(--color-white-20);
  --scheme-muted: var(--color-white-60);
}

/* Scheme 2 — Cream (light warm) ·················· logo: dark ···· */
.scheme-2 {
  --scheme-bg: var(--color-old-gold-lightest);
  --scheme-text: var(--color-neutral-darkest);
  --scheme-accent: var(--color-neutral-darkest);
  --scheme-border: var(--color-dark-15);
  --scheme-muted: var(--color-dark-60);
}

/* Scheme 3 — Deep gold ·························· logo: light ··· */
.scheme-3 {
  --scheme-bg: var(--color-old-gold-darker);
  --scheme-text: var(--color-white);
  --scheme-accent: var(--color-white);
  --scheme-border: var(--color-white-20);
  --scheme-muted: var(--color-white-60);
}

/* Scheme 4 — Slate (cool dark) ················· logo: light ··· */
.scheme-4 {
  --scheme-bg: var(--color-charade);
  --scheme-text: var(--color-white);
  --scheme-accent: var(--color-white);
  --scheme-border: var(--color-white-20);
  --scheme-muted: var(--color-white-60);
}

/* Scheme 5 — Paper (light neutral) ············· logo: dark ···· */
.scheme-5 {
  --scheme-bg: var(--color-merino);
  --scheme-text: var(--color-neutral-darkest);
  --scheme-accent: var(--color-neutral-darkest);
  --scheme-border: var(--color-dark-15);
  --scheme-muted: var(--color-dark-60);
}

/* Scheme 6 — Bright gold ······················· logo: light ··· */
.scheme-6 {
  --scheme-bg: var(--color-old-gold);
  --scheme-text: var(--color-white);
  --scheme-accent: var(--color-white);
  --scheme-border: var(--color-white-20);
  --scheme-muted: var(--color-white-60);
}

/* Scheme 7 — Light gold ························· logo: dark ···· */
.scheme-7 {
  --scheme-bg: var(--color-old-gold-light);
  --scheme-text: var(--color-neutral-darkest);
  --scheme-accent: var(--color-neutral-darkest);
  --scheme-border: var(--color-dark-15);
  --scheme-muted: var(--color-dark-60);
}

/* Helper: borders & accents that follow the active scheme */
.scheme-border { border-color: var(--scheme-border); }
.scheme-accent { color: var(--scheme-accent); }
.scheme-muted  { color: var(--scheme-muted); }

/* On light schemes, the light logo (white/gold) must invert to stay legible.
   Add .logo-invert-on-light alongside a scheme on light backgrounds. */
.scheme-2 .logo-dark img,
.scheme-5 .logo-dark img,
.scheme-7 .logo-dark img {
  filter: brightness(0);
}