/*
 * App Theme (shared)
 * ------------------
 * Purpose: Keep the marketing site visually consistent with the app UI (dark, Sonos-inspired).
 *
 * Revert path:
 * - Remove the `<link rel="stylesheet" href="/app-theme.css">` line(s) from the marketing HTML pages.
 * - Optionally delete this file.
 */

:root {
  --bg-primary: #0a0a0a;
  --bg-secondary: #1a1a1a;
  --bg-tertiary: #252525;
  --text-primary: #f5f5f5;
  --text-secondary: #a0a0a0;
  --text-tertiary: #707070;
  --accent: #667eea;
  --accent-hover: #5568d3;
  --border: #2a2a2a;
  --border-hover: #3a3a3a;
  --gradient-purple: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  --gradient-purple-simple: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

html {
  color-scheme: dark;
}

body {
  background: var(--bg-primary) !important;
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Core brand helpers */
.gradient-text {
  background: var(--gradient-purple) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.gradient-bg {
  background: var(--gradient-purple) !important;
}

.glass-effect {
  background: rgba(10, 10, 10, 0.92) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-color: var(--border) !important;
}

.feature-card {
  border-color: var(--border) !important;
}

.feature-card:hover {
  border-color: rgba(102, 126, 234, 0.35) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.55) !important;
}

.section-divider {
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.12), transparent) !important;
}

.badge {
  background: rgba(102, 126, 234, 0.14) !important;
  color: #c4b5fd !important; /* violet-300-ish */
  border: 1px solid rgba(102, 126, 234, 0.22);
}

/* Make the background blobs read as "glow" on dark background */
.mix-blend-multiply {
  mix-blend-mode: screen !important;
}

/* Tailwind neutral remap (keep this tight: only neutrals / whites / grays) */
.bg-white {
  background-color: var(--bg-secondary) !important;
}
.bg-white\/80 {
  background-color: rgba(10, 10, 10, 0.78) !important;
}
.bg-white\/50 {
  background-color: rgba(10, 10, 10, 0.55) !important;
}
.bg-gray-50 {
  background-color: var(--bg-primary) !important;
}
.bg-gray-100 {
  background-color: var(--bg-tertiary) !important;
}

/* Gradient backgrounds: remap light gradients to dark variants */
/* Target elements that have gradient classes - use more specific selectors */
div[class*="from-purple-50"][class*="to-blue-50"],
div[class*="from-purple-50"][class*="to-pink-50"] {
  background: linear-gradient(to bottom right, rgba(102, 126, 234, 0.15), rgba(118, 75, 162, 0.15)) !important;
  background-color: var(--bg-secondary) !important;
  border-color: rgba(102, 126, 234, 0.3) !important;
}
div[class*="from-blue-50"][class*="to-cyan-50"] {
  background: linear-gradient(to bottom right, rgba(59, 130, 246, 0.15), rgba(6, 182, 212, 0.15)) !important;
  background-color: var(--bg-secondary) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
}
/* Gray-to-white gradients: remap to dark */
div[class*="from-gray-50"][class*="to-white"],
section[class*="from-gray-50"][class*="to-white"] {
  background: linear-gradient(to bottom right, var(--bg-primary), var(--bg-secondary)) !important;
  background-color: var(--bg-primary) !important;
}

/* Ensure text inside gradient boxes is readable - target text elements but exclude colored ones */
div[class*="from-purple-50"] p,
div[class*="from-purple-50"] h1,
div[class*="from-purple-50"] h2,
div[class*="from-purple-50"] h3,
div[class*="from-purple-50"] h4,
div[class*="from-purple-50"] li,
div[class*="from-purple-50"] span:not([class*="text-green"]):not([class*="text-red"]):not([class*="text-blue"]):not([class*="text-purple"]),
div[class*="from-blue-50"] p,
div[class*="from-blue-50"] h1,
div[class*="from-blue-50"] h2,
div[class*="from-blue-50"] h3,
div[class*="from-blue-50"] h4,
div[class*="from-blue-50"] li,
div[class*="from-blue-50"] span:not([class*="text-green"]):not([class*="text-red"]):not([class*="text-blue"]):not([class*="text-purple"]) {
  color: var(--text-primary) !important;
}
/* Also override gray text classes specifically */
div[class*="from-purple-50"] .text-gray-900,
div[class*="from-purple-50"] .text-gray-800,
div[class*="from-purple-50"] .text-gray-700,
div[class*="from-purple-50"] .text-gray-600,
div[class*="from-blue-50"] .text-gray-900,
div[class*="from-blue-50"] .text-gray-800,
div[class*="from-blue-50"] .text-gray-700,
div[class*="from-blue-50"] .text-gray-600 {
  color: var(--text-primary) !important;
}
/* Ensure text in gray-to-white gradient sections is readable */
section[class*="from-gray-50"] p,
section[class*="from-gray-50"] h1,
section[class*="from-gray-50"] h2,
section[class*="from-gray-50"] h3,
section[class*="from-gray-50"] h4,
section[class*="from-gray-50"] div:not([class*="gradient"]):not([class*="text-green"]):not([class*="text-red"]):not([class*="text-blue"]):not([class*="text-purple"]),
div[class*="from-gray-50"] p,
div[class*="from-gray-50"] h1,
div[class*="from-gray-50"] h2,
div[class*="from-gray-50"] h3,
div[class*="from-gray-50"] h4,
div[class*="from-gray-50"] div:not([class*="gradient"]):not([class*="text-green"]):not([class*="text-red"]):not([class*="text-blue"]):not([class*="text-purple"]) {
  color: var(--text-primary) !important;
}
/* Also override gray text classes in these sections */
section[class*="from-gray-50"] .text-gray-900,
section[class*="from-gray-50"] .text-gray-800,
section[class*="from-gray-50"] .text-gray-700,
section[class*="from-gray-50"] .text-gray-600,
div[class*="from-gray-50"] .text-gray-900,
div[class*="from-gray-50"] .text-gray-800,
div[class*="from-gray-50"] .text-gray-700,
div[class*="from-gray-50"] .text-gray-600 {
  color: var(--text-primary) !important;
}

.text-gray-900,
.text-gray-800,
.text-gray-700 {
  color: var(--text-primary) !important;
}
.text-gray-600,
.text-gray-500 {
  color: var(--text-secondary) !important;
}
.text-gray-400 {
  color: var(--text-tertiary) !important;
}

.border-gray-100,
.border-gray-200,
.border-gray-300 {
  border-color: var(--border) !important;
}

/* Common hover utilities used by the marketing pages */
.hover\:bg-gray-50:hover {
  background-color: var(--bg-tertiary) !important;
}
.hover\:text-gray-900:hover {
  color: var(--text-primary) !important;
}
.hover\:border-gray-300:hover {
  border-color: var(--border-hover) !important;
}

/* Make placeholder/secondary elements readable in dark mode */
input,
textarea,
select {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
}
input::placeholder,
textarea::placeholder {
  color: var(--text-tertiary) !important;
}

/* Guides: override hard-coded "prose" colors without rewriting content */
.prose h2,
.prose h3,
.prose p,
.prose li {
  color: var(--text-primary) !important;
}
.prose blockquote {
  border-left-color: var(--accent) !important;
  color: var(--text-secondary) !important;
  background-color: rgba(102, 126, 234, 0.08) !important;
}
.prose strong {
  color: var(--text-primary) !important;
}
.prose code {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
}

.disclaimer {
  background-color: rgba(245, 158, 11, 0.12) !important;
  border-left-color: rgba(245, 158, 11, 0.75) !important;
  color: var(--text-primary) !important;
}
.disclaimer h3,
.disclaimer p,
.disclaimer li,
.disclaimer strong {
  color: var(--text-primary) !important;
}