/* Theme overrides — dark mode via html[data-theme="dark"] */

[data-theme="dark"] {
  color-scheme: dark;

  --color-bg-light: #212121;
  --color-bg-light-subtle: #2a2a2a;
  --color-text-on-light: #ded6c6;
  --color-text-on-light-muted: rgba(222, 214, 198, 0.75);
  --color-border-light: rgba(222, 214, 198, 0.15);

  --color-bg-dark: #121212;
  --color-surface: #212121;
  --color-text-primary: #ded6c6;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);
}

@media (prefers-reduced-motion: no-preference) {
  html[data-theme] body,
  html[data-theme] .section-light,
  html[data-theme] .section-dark,
  html[data-theme] .site-header,
  html[data-theme] .site-footer,
  html[data-theme] .site-header__nav {
    transition:
      background-color 200ms ease,
      color 200ms ease,
      border-color 200ms ease;
  }
}

/* Card overlays that hardcode light-mode rgba values */

[data-theme="dark"] .proof-card,
[data-theme="dark"] .pathway-card {
  background-color: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .proof-card:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .website-tier-card__phases {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: var(--color-border-light);
}

[data-theme="dark"] .website-tier-card--featured .website-tier-card__phases {
  background-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .contact-calendar__fallback {
  background-color: rgba(255, 255, 255, 0.06);
}

/* Journey diagram — light section container in dark mode */

[data-theme="dark"] .journey-diagram__canvas {
  background-color: var(--color-bg-light-subtle);
  border-color: var(--color-border-light);
}

[data-theme="dark"] .journey-diagram__service--continued {
  background-color: var(--color-bg-light-subtle);
  color: var(--color-text-on-light);
}

[data-theme="dark"] .journey-diagram__milestones span {
  background-color: var(--color-bg-light-subtle);
}

[data-theme="dark"] .journey-diagram__domain {
  color: var(--color-text-on-light-muted);
}

[data-theme="dark"] .journey-diagram__domain--offers {
  color: var(--color-text-on-light);
}

[data-theme="dark"] .journey-diagram__timeline-line::after {
  background-color: var(--color-border-light);
}

[data-theme="dark"] .journey-diagram__tip[data-tip]:hover::after,
[data-theme="dark"] .journey-diagram__tip[data-tip]:focus-visible::after {
  background-color: var(--color-bg-light-subtle);
  border-color: var(--color-border-light);
  color: var(--color-text-on-light);
}

[data-theme="dark"] .journey-diagram__service--primary .journey-diagram__tip[data-tip]:hover::after,
[data-theme="dark"]
  .journey-diagram__service--primary
  .journey-diagram__tip[data-tip]:focus-visible::after {
  background-color: var(--color-bg-dark);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--color-text-on-dark);
}

/* Secondary buttons on light sections */

[data-theme="dark"] .section-light .button--secondary {
  color: var(--color-text-on-light);
  border-color: rgba(222, 214, 198, 0.35);
}

[data-theme="dark"] .section-light .button--secondary:hover {
  color: var(--color-accent-soft);
  border-color: var(--color-accent-soft);
}

/* Logo marquee — keep a light band in dark mode so client wordmarks stay readable */

[data-theme="dark"] .logo-marquee {
  --color-bg-light: #f8f7f5;
  --color-border-light: rgba(33, 33, 33, 0.12);
  --color-text-on-light-muted: #5c5c5c;
  background-color: #f8f7f5;
  border-top-color: rgba(33, 33, 33, 0.12);
  border-bottom-color: rgba(33, 33, 33, 0.12);
}

[data-theme="dark"] .logo-marquee__label,
[data-theme="dark"] .logo-marquee__brand-name {
  color: #5c5c5c;
}

[data-theme="dark"] .logo-marquee .logo-marquee__logo-surface--bevel {
  background-color: #ffffff;
  border-color: rgba(33, 33, 33, 0.12);
}

/* Testimonial logos — dark wordmarks need a fixed light backing on dark cards */

[data-theme="dark"] .quotes-carousel__company-logo-surface--bevel {
  background-color: var(--client-logo-tile-bg);
  border-color: var(--client-logo-tile-border);
}

[data-theme="dark"] .quotes-carousel__company-logo--alteria {
  padding: 0.35rem 0.65rem;
  border-radius: 0.35rem;
  background-color: var(--client-logo-tile-bg);
  box-sizing: content-box;
}

/* About page keeps its black canvas in both themes */