/* ==========================================================================
   DARKMODE.CSS — [data-theme="dark"] overrides
   ========================================================================== */

[data-theme="dark"] {
  --color-bg: var(--color-bg-dark);
  --color-surface: var(--color-surface-dark);
  --color-surface-alt: var(--color-surface-alt-dark);
  --color-text: var(--color-text-dark);
  --color-text-secondary: var(--color-text-secondary-dark);
  --color-text-tertiary: #8297A3;
  --color-border: var(--color-border-dark);
  --color-border-strong: #274655;
  --color-primary-50: #0E222C;
  --color-primary-100: #113240;
  --color-primary-ink: #4FC3D9;
  --color-ink: #F2F6F7;

  --glass-bg: rgba(15, 33, 44, 0.72);
  --glass-border: rgba(255,255,255,0.08);
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] .brand,
[data-theme="dark"] .region-card h3 { color: var(--color-text-dark); }

[data-theme="dark"] .site-header.is-scrolled { box-shadow: 0 4px 24px rgba(0,0,0,0.35); }

[data-theme="dark"] .btn--outline { color: var(--color-text-dark); border-color: var(--color-border-strong); }
[data-theme="dark"] .btn--outline:hover { background: var(--color-surface-alt-dark); }

[data-theme="dark"] .page-hero { background: linear-gradient(180deg, var(--color-primary-100), var(--color-bg-dark)); }

[data-theme="dark"] .photo-slot {
  background: linear-gradient(135deg, #123443 0%, #0F212C 70%);
  color: #3E7C8C;
}

[data-theme="dark"] .badge--soft-primary { background: rgba(14, 92, 107, 0.28); color: #8FD9E6; }
[data-theme="dark"] .badge--soft-accent { background: rgba(232, 150, 58, 0.2); color: #F5C275; }

[data-theme="dark"] .mobile-cta-bar,
[data-theme="dark"] .mobile-menu { background: var(--color-surface-dark); border-color: var(--color-border-dark); }

[data-theme="dark"] img { filter: brightness(0.92) contrast(1.02); }

/* Smooth theme transition for all themed surfaces */
body, .site-header, .card, .btn, .feature-card, .testimonial-card, .field input, .field textarea {
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}