/* =============================================================================
   13-theme.css — Dark mode (data-theme on html)
   Surfaces use warm grey-brown tokens from 1-tokens.css; brand greens stay official.
   ============================================================================= */

/* ---------- Default — token overrides ---------- */

[data-theme='dark'] {
  /* Section greens — slightly dimmed; nav/footer dark green stays exact below */
  --theme-brand-retain: 90%;

  --color-primary: color-mix(in srgb, var(--palette-primary) var(--theme-brand-retain), black);
  --color-primary-dark: var(--palette-primary-dark);
  --color-primary-light: color-mix(
    in srgb,
    var(--palette-primary-light) var(--theme-brand-retain),
    black
  );
  --color-accent: color-mix(in srgb, var(--palette-accent) var(--theme-brand-retain), black);
  --color-accent-warm: color-mix(
    in srgb,
    var(--palette-accent-warm) var(--theme-brand-retain),
    black
  );

  /* Neutral canvas — distinct from premium green header/footer */
  --color-bg: var(--palette-dark-bg);
  --color-bg-alt: var(--palette-dark-bg-alt);
  --color-panel: var(--palette-dark-panel);
  --color-input: var(--palette-dark-input);
  --color-border: var(--palette-dark-border);
  --color-text: var(--palette-dark-text);
  --color-text-muted: var(--palette-dark-text-muted);

  /* Buttons — keep pills bright; soften button text slightly */
  --color-cta-bg: var(--palette-cta-bg);
  --color-cta-text: color-mix(in srgb, var(--palette-cta-text) 85%, white);
}

/* ---------- Default — component tweaks in dark mode ---------- */

[data-theme='dark'] .media-placeholder {
  background: var(--palette-dark-bg-alt);
  border-color: var(--palette-dark-border);
  color: var(--palette-dark-text-muted);
}

[data-theme='dark'] .contact__map {
  border-color: var(--color-border);
  background: var(--palette-dark-input);
}

[data-theme='dark'] .contact__map iframe {
  filter: invert(92%) hue-rotate(180deg) brightness(0.88) contrast(0.96) saturate(0.85);
}

/* Gallery / legal — back link (green primary is low contrast on dark canvas) */
[data-theme='dark'] .gallery-page__back,
[data-theme='dark'] .legal-page__back {
  color: var(--color-white);
}

[data-theme='dark'] .gallery-page__back:hover,
[data-theme='dark'] .legal-page__back:hover {
  color: var(--color-primary);
}