/* ======================================================
   THEME OVERRIDES v2.1
   Themes: Ocean (dark) + Light + OS dark-preference fallback
   Method: [data-theme] attribute + @media (prefers-color-scheme: dark)
   ====================================================== */

/* ═══ OCEAN THEME — via media query (OS dark preference) ═══ */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --text-orange: #FF8533;
    --text-teal: #4DE8D4;
    --text-body: #B8C8D8;
    --text-heading: #FFFFFF;
    --text-muted: #6B8399;
    --text-white: #FFFFFF;
    --surface-white: #0F1B2D;
    --surface-warm: #060D18;
    --surface-warm-light: #0A1422;
    --surface-warm-alt: #0F1B2D;
    --surface-input: #081020;
    --cta-bg: #FF6700;
    --cta-bg-hover: #E55A00;
    --border-subtle: rgba(100, 180, 255, 0.08);
    --color-error: #E74C3C;
    --shadow-resting: 0 1px 3px rgba(0, 0, 0, 0.30);
    --shadow-hover: 0 4px 24px rgba(0, 0, 0, 0.40), 0 0 0 1px var(--border-subtle);
    --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.50);
    --shadow-nav: 0 1px 3px rgba(0, 0, 0, 0.30), 0 0 0 1px var(--border-subtle);
    --gray-50: #0A1422;
    --gray-100: #0F1B2D;
    --gray-200: #162538;
    --gray-300: #1E3148;
    --gray-400: #3A5570;
    --gray-500: #6B8399;
    --gray-600: #8EA4B8;
    --gray-700: #B8C8D8;
    --gray-800: #D8E4EC;
    --gray-900: #EEF3F7;
    --bg-warm-white: var(--surface-warm);
    --bg-warm-light: var(--surface-warm-light);
    --bg-section-alt: var(--surface-warm-alt);
    --white: var(--surface-white);
    --shadow-sm: var(--shadow-resting);
    --shadow-md: var(--shadow-hover);
    --surface-dark: #060D18;
    --surface-dark-blue: #0A1422;
    --text-on-dark: #FFFFFF;
    --text-on-dark-muted: #B8C8D8;
    --text-on-dark-hero: rgba(255, 255, 255, 0.9);
    --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.50);
  }
}

/* ═══ OCEAN THEME — deep blue-tinted dark ═══ */
[data-theme="dark"] {
  --text-orange: #FF8533;
  --text-teal: #4DE8D4;
  --text-body: #B8C8D8;
  --text-heading: #FFFFFF;
  --text-muted: #6B8399;
  --text-white: #FFFFFF;
  --surface-white: #0F1B2D;
  --surface-warm: #060D18;
  --surface-warm-light: #0A1422;
  --surface-warm-alt: #0F1B2D;
  --surface-input: #081020;
  --cta-bg: #FF6700;
  --cta-bg-hover: #E55A00;
  --border-subtle: rgba(100, 180, 255, 0.08);
  --color-error: #E74C3C;
  --shadow-resting: 0 1px 3px rgba(0, 0, 0, 0.30);
  --shadow-hover: 0 4px 24px rgba(0, 0, 0, 0.40), 0 0 0 1px var(--border-subtle);
  --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.50);
  --shadow-nav: 0 1px 3px rgba(0, 0, 0, 0.30), 0 0 0 1px var(--border-subtle);
  --gray-50: #0A1422;
  --gray-100: #0F1B2D;
  --gray-200: #162538;
  --gray-300: #1E3148;
  --gray-400: #3A5570;
  --gray-500: #6B8399;
  --gray-600: #8EA4B8;
  --gray-700: #B8C8D8;
  --gray-800: #D8E4EC;
  --gray-900: #EEF3F7;
  --bg-warm-white: var(--surface-warm);
  --bg-warm-light: var(--surface-warm-light);
  --bg-section-alt: var(--surface-warm-alt);
  --white: var(--surface-white);
  --shadow-sm: var(--shadow-resting);
  --shadow-md: var(--shadow-hover);
  --surface-dark: #060D18;
  --surface-dark-blue: #0A1422;
  --text-on-dark: #FFFFFF;
  --text-on-dark-muted: #B8C8D8;
  --text-on-dark-hero: rgba(255, 255, 255, 0.9);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.50);
}

/* ═══ LIGHT OVERRIDE — force light even when OS prefers dark ═══ */
[data-theme="light"] {
  --text-orange: #B34900;
  --text-teal: #006B62;
  --text-body: #3D2B1F;
  --text-heading: #1A1A1A;
  --text-muted: #7A6B5C;
  --surface-white: #FFFFFF;
  --surface-warm: #FDF8F4;
  --surface-warm-light: #FAF5EF;
  --surface-warm-alt: #F5EDE4;
  --surface-input: #FFFFFF;
  --cta-bg: #0F1B2D;
  --cta-bg-hover: #0A1322;
  --border-subtle: rgba(0, 0, 0, 0.06);
  --color-error: #DC3545;
  --shadow-resting: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-hover: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 10px 15px -3px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.12);
  --shadow-nav: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.04);
  --gray-50: #FDF8F4;
  --gray-100: #FAF5EF;
  --gray-200: #EDE4DA;
  --gray-300: #D4C8BC;
  --gray-400: #A89888;
  --gray-500: #7A6B5C;
  --gray-600: #5C4E40;
  --gray-700: #3E3228;
  --gray-800: #231A12;
  --gray-900: #130E08;
  --bg-warm-white: var(--surface-warm);
  --bg-warm-light: var(--surface-warm-light);
  --bg-section-alt: var(--surface-warm-alt);
  --white: var(--surface-white);
  --shadow-sm: var(--shadow-resting);
  --shadow-md: var(--shadow-hover);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.16);
}


/* ═══════════════════════════════════════════════════════
   ELEMENT-SPECIFIC OVERRIDES — Ocean theme
   ═══════════════════════════════════════════════════════ */
[data-theme="dark"] .text-white,
[data-theme="dark"] .navbar-menu .nav-cta,
[data-theme="dark"] .navbar-menu .nav-cta:hover,
[data-theme="dark"] .navbar-logo-icon,
[data-theme="dark"] .btn-gradient {
  color: var(--text-white);
}

[data-theme="dark"] .navbar {
  background: var(--surface-warm);
  border-bottom-color: var(--gray-200);
}

/* Scrolled navbar — dark theme translucency */
[data-theme="dark"] .navbar--scrolled,
[data-theme="dark"] .navbar.scrolled { background: rgba(6, 13, 24, 0.92) !important; }

[data-theme="dark"] :is(.navbar--scrolled, .navbar.scrolled) {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-nav) !important;
}

[data-theme="dark"] .dropdown {
  background: var(--surface-warm-alt);
  border: 1px solid var(--border-subtle);
}

[data-theme="dark"] .navbar-menu.active {
  background: var(--surface-warm-alt);
}

[data-theme="dark"] .mobile-menu-toggle span {
  background: var(--text-body);
}

[data-theme="dark"] .hero-badge {
  background: rgba(255, 103, 0, 0.15) !important;
}

[data-theme="dark"] :is(.card, .audience-card, .service-card, .faq-item) {
  background: var(--surface-warm-alt);
  border-color: var(--border-subtle);
}

[data-theme="dark"] :is(.card:hover, .audience-card:hover, .service-card:hover) {
  border-color: rgba(255, 103, 0, 0.20) !important;
}

[data-theme="dark"] .profile-card {
  background: var(--surface-warm-alt);
}

[data-theme="dark"] .section--cool-tint {
  background: linear-gradient(180deg, var(--surface-warm-light) 0%, var(--surface-warm) 100%) !important;
}

[data-theme="dark"] .section--warm-tint {
  background: linear-gradient(180deg, var(--surface-warm-alt) 0%, var(--surface-warm) 100%) !important;
}

[data-theme="dark"] .contact-layout {
  box-shadow: var(--shadow-hover);
}

[data-theme="dark"] :is(.form-input, .form-textarea, .form-select, .coverage-search__box input) {
  background: var(--surface-input);
  border-color: rgba(255, 255, 255, 0.10);
  color: var(--text-body);
}

[data-theme="dark"] :is(.form-input:focus, .form-textarea:focus, .form-select:focus) {
  border-color: var(--brand-orange);
  box-shadow: 0 0 0 3px rgba(255, 103, 0, 0.15);
}

[data-theme="dark"] :is(.form-error, .is-invalid, .form-group input[aria-invalid="true"], .form-group select[aria-invalid="true"], .form-group textarea[aria-invalid="true"]) {
  border-color: var(--color-error);
}

[data-theme="dark"] :is(.form-error, .form-error-text) {
  color: var(--color-error);
}

[data-theme="dark"] .btn-linkedin { background: #0A66C2; color: #fff; }
[data-theme="dark"] .btn-linkedin:hover { background: #004182; }

[data-theme="dark"] .social-feed {
  box-shadow: var(--shadow-hover);
}

[data-theme="dark"] .card-trial {
  box-shadow: var(--shadow-hover);
}

[data-theme="dark"] .card-trial .bottom {
  box-shadow: inset 0 1px 0 var(--border-subtle);
}

[data-theme="dark"] .skip-link:focus {
  background: var(--surface-warm-alt);
  color: var(--text-heading);
}

[data-theme="dark"] .feature-list li {
  border-bottom-color: var(--gray-200);
}

[data-theme="dark"] .audience-card__icon {
  background: rgba(255, 103, 0, 0.12);
}

/* OS dark preference — same element overrides (for users without explicit theme) */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .text-white,
  html:not([data-theme]) .navbar-menu .nav-cta,
  html:not([data-theme]) .navbar-menu .nav-cta:hover,
  html:not([data-theme]) .navbar-logo-icon,
  html:not([data-theme]) .btn-gradient { color: var(--text-white); }

  html:not([data-theme]) .navbar { background: var(--surface-warm); border-bottom-color: var(--gray-200); }
  html:not([data-theme]) .navbar--scrolled,
  html:not([data-theme]) .navbar.scrolled { background: rgba(6, 13, 24, 0.92) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--shadow-nav) !important; }

  html:not([data-theme]) .dropdown { background: var(--surface-warm-alt); border: 1px solid var(--border-subtle); }
  html:not([data-theme]) .navbar-menu.active { background: var(--surface-warm-alt); }
  html:not([data-theme]) .mobile-menu-toggle span { background: var(--text-body); }
  html:not([data-theme]) .hero-badge { background: rgba(255, 103, 0, 0.15) !important; }

  html:not([data-theme]) :is(.card, .audience-card, .service-card, .faq-item) { background: var(--surface-warm-alt); border-color: var(--border-subtle); }
  html:not([data-theme]) :is(.card:hover, .audience-card:hover, .service-card:hover) { border-color: rgba(255, 103, 0, 0.20) !important; }
  html:not([data-theme]) .profile-card { background: var(--surface-warm-alt); }

  html:not([data-theme]) .section--cool-tint { background: linear-gradient(180deg, var(--surface-warm-light) 0%, var(--surface-warm) 100%) !important; }
  html:not([data-theme]) .section--warm-tint { background: linear-gradient(180deg, var(--surface-warm-alt) 0%, var(--surface-warm) 100%) !important; }

  html:not([data-theme]) .contact-layout { box-shadow: var(--shadow-hover); }
  html:not([data-theme]) :is(.form-input, .form-textarea, .form-select, .coverage-search__box input) { background: var(--surface-input); border-color: rgba(255, 255, 255, 0.10); color: var(--text-body); }
  html:not([data-theme]) :is(.form-input:focus, .form-textarea:focus, .form-select:focus) { border-color: var(--brand-orange); box-shadow: 0 0 0 3px rgba(255, 103, 0, 0.15); }

  html:not([data-theme]) :is(.form-error, .is-invalid, .form-group input[aria-invalid="true"], .form-group select[aria-invalid="true"], .form-group textarea[aria-invalid="true"]) { border-color: var(--color-error); }
  html:not([data-theme]) :is(.form-error, .form-error-text) { color: var(--color-error); }

  html:not([data-theme]) .btn-linkedin { background: #0A66C2; color: #fff; }
  html:not([data-theme]) .btn-linkedin:hover { background: #004182; }

  html:not([data-theme]) .social-feed { box-shadow: var(--shadow-hover); }
  html:not([data-theme]) .card-trial { box-shadow: var(--shadow-hover); }
  html:not([data-theme]) .card-trial .bottom { box-shadow: inset 0 1px 0 var(--border-subtle); }
  html:not([data-theme]) .skip-link:focus { background: var(--surface-warm-alt); color: var(--text-heading); }
  html:not([data-theme]) .feature-list li { border-bottom-color: var(--gray-200); }
  html:not([data-theme]) .audience-card__icon { background: rgba(255, 103, 0, 0.12); }
}

/* Force light theme CTA text color */
[data-theme="light"] .navbar-menu .nav-cta {
  color: #FFFFFF;
}

/* Light theme btn-gradient: orange text on transparent bg, white on hover fill */
[data-theme="light"] .btn-gradient {
  color: var(--brand-orange);
}

[data-theme="light"] .btn-gradient:hover {
  color: #FFFFFF;
}