/* ===== DARK MODE ===== */

[data-theme="dark"] {
  /* Semantic Tokens — Dark Mode */
  --bg-primary: #3a3335;
  --bg-surface: #453d3f;
  --bg-elevated: #504749;
  --bg-muted: #40383a;
  --bg-inverse: #fdf0d5;
  --text-primary: #fdf0d5;
  --text-secondary: #c6d8d3;
  --text-muted: rgba(253, 240, 213, 0.5);
  --text-inverse: #3a3335;
  --accent: #f0544f;
  --accent-hover: #d94440;
  --accent-muted: rgba(240, 84, 79, 0.15);
  --accent-text: #3a3335;
  --border: rgba(198, 216, 211, 0.25);
  --border-strong: rgba(198, 216, 211, 0.4);
  --focus-ring: 0 0 0 3px rgba(240, 84, 79, 0.22);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55);
  --shadow-gold: 0 4px 16px rgba(240, 84, 79, 0.25);
}

/* ── Component overrides ── */

[data-theme="dark"] .card--testimonial {
  background-color: var(--bg-surface);
}

[data-theme="dark"] .card__category {
  background-color: rgba(247, 245, 240, 0.08);
  color: var(--text-primary);
}

[data-theme="dark"] .form-input {
  background-color: var(--bg-surface);
  color: var(--text-primary);
}

[data-theme="dark"] .form-input::placeholder {
  color: var(--text-muted);
}

/* ── Image adjustments ── */
[data-theme="dark"] img {
  filter: brightness(0.9);
}

[data-theme="dark"] .hero-image {
  filter: brightness(0.8) saturate(0.9);
}

/* ── FOUC prevention script styling ── */
.no-js-hidden {
  opacity: 0;
}

.js-loaded .no-js-hidden {
  opacity: 1;
  transition: opacity var(--transition-base);
}