/* Surface themes. A section opts in with .theme-dark, .theme-dark-deep or .theme-light.
   Components read these semantic variables, so one class flips the whole section.
   The two hero directions from the style tiles: A = dark (forest-led), B = light.

   .theme-dark and .theme-dark-deep are the same palette at two forest depths
   (--color-forest vs --color-forest-deep). Consecutive dark sections alternate
   between them page-wide, purely so a viewer can sense where one section ends
   and the next begins without introducing a lighter surface yet. */

.theme-dark {
  --surface: var(--color-forest);
  --header-bg: var(--color-forest);
  --on-surface: var(--color-white);
  --on-surface-muted: rgb(255 255 255 / 0.82);
  --body-weight: var(--fw-light);
  --line: rgb(255 255 255 / 0.1);
  --focus: var(--color-sky);
  --logo-color: var(--color-lime);
  --nav-link: rgb(255 255 255 / 0.8);
  --nav-link-hover: var(--color-lime);

  --btn-primary-bg: var(--color-lime);
  --btn-primary-bg-hover: var(--color-lime-hover);
  --btn-primary-fg: var(--color-forest);
  --btn-secondary-bg: transparent;
  --btn-secondary-fg: var(--color-white);
  --btn-secondary-border: rgb(255 255 255 / 0.35);
  --btn-secondary-hover-fg: var(--color-sky);
  --btn-secondary-hover-border: var(--color-sky);
}

.theme-dark-deep {
  --surface: var(--color-forest-deep);
  --header-bg: var(--color-forest-deep);
  --on-surface: var(--color-white);
  --on-surface-muted: rgb(255 255 255 / 0.82);
  --body-weight: var(--fw-light);
  --line: rgb(255 255 255 / 0.1);
  --focus: var(--color-sky);
  --logo-color: var(--color-lime);
  --nav-link: rgb(255 255 255 / 0.8);
  --nav-link-hover: var(--color-lime);

  --btn-primary-bg: var(--color-lime);
  --btn-primary-bg-hover: var(--color-lime-hover);
  --btn-primary-fg: var(--color-forest);
  --btn-secondary-bg: transparent;
  --btn-secondary-fg: var(--color-white);
  --btn-secondary-border: rgb(255 255 255 / 0.35);
  --btn-secondary-hover-fg: var(--color-sky);
  --btn-secondary-hover-border: var(--color-sky);
}

.theme-light {
  --surface: var(--color-bg);
  --header-bg: var(--color-surface);
  --on-surface: var(--color-forest);
  --on-surface-muted: var(--color-muted);
  --body-weight: var(--fw-regular);
  --line: var(--color-border);
  --focus: var(--color-forest);
  --logo-color: var(--color-forest);
  --nav-link: var(--color-muted);
  --nav-link-hover: var(--color-forest);

  --btn-primary-bg: var(--color-forest);
  --btn-primary-bg-hover: var(--color-forest-hover);
  --btn-primary-fg: var(--color-white);
  --btn-secondary-bg: var(--color-surface);
  --btn-secondary-fg: var(--color-forest);
  --btn-secondary-border: var(--color-border-strong);
  --btn-secondary-hover-fg: var(--color-forest);
  --btn-secondary-hover-border: var(--color-forest);
}