/**
 * Light / dark theme - paired with html[data-theme="dark"|"light"].
 * Dark matches existing Tailwind utilities; light uses a refined neutral palette.
 */

html {
  color-scheme: dark;
  transition: background-color 0.25s ease, color 0.25s ease;
}

html[data-theme="landing"] {
  color-scheme: light;
}

html[data-theme="light"] {
  color-scheme: light;
  /* Professional light: neutral canvas, crisp surfaces, restrained contrast */
  --lm-canvas: #eef0f4;
  --lm-surface: #ffffff;
  --lm-surface-raised: #f7f8fa;
  --lm-border: rgba(15, 23, 42, 0.06);
  --lm-border-strong: rgba(15, 23, 42, 0.1);
  --lm-text: #0f1419;
  --lm-text-secondary: #3d4d5d;
  --lm-text-muted: #5c6b7a;
  --lm-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 14px rgba(15, 23, 42, 0.05);
  --lm-shadow-md: 0 8px 28px rgba(15, 23, 42, 0.07);
  --lm-accent-red: #dc2626;
  --lm-accent-red-soft: #b91c1c;
}

html[data-theme="light"] ::selection {
  background: rgba(220, 38, 38, 0.14);
  color: #1c1917;
}

html[data-theme="light"] body.theme-body {
  background-color: var(--lm-canvas) !important;
  color: var(--lm-text) !important;
}

/* Surfaces that use bg #0A0A0A - elevated card, not flat white everywhere */
html[data-theme="light"] [class*="0A0A0A"] {
  background-color: var(--lm-surface) !important;
  border-color: var(--lm-border) !important;
  box-shadow: var(--lm-shadow-sm) !important;
}

/* White / opacity borders */
html[data-theme="light"] [class*="border-white/"] {
  border-color: var(--lm-border-strong) !important;
}

/* Frosted fills */
html[data-theme="light"] [class*="bg-white/"] {
  background-color: rgba(15, 23, 42, 0.035) !important;
}

html[data-theme="light"] [class*="hover:bg-white/"]:hover {
  background-color: rgba(15, 23, 42, 0.055) !important;
}

/* Nav + mobile */
html[data-theme="light"] .theme-nav {
  background: rgba(255, 255, 255, 0.82) !important;
  border-color: var(--lm-border) !important;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}

html[data-theme="light"] .theme-mobile-menu {
  background: rgba(247, 248, 250, 0.97) !important;
}

html[data-theme="light"] #demo-modal {
  background: rgba(240, 242, 246, 0.88) !important;
}

/* Ambient glows - softer in light */
html[data-theme="light"] .hero-glow {
  opacity: 0.42;
}
html[data-theme="light"] .hero-glow-gold {
  opacity: 0.32;
}

/* Grid + noise */
html[data-theme="light"] .grid-bg {
  background-image: linear-gradient(rgba(15, 23, 42, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.045) 1px, transparent 1px);
  opacity: 0.85;
}

html[data-theme="light"] .noise {
  opacity: 0.09 !important;
}

/* Text hierarchy */
html[data-theme="light"] #app .text-white {
  color: var(--lm-text) !important;
}

html[data-theme="light"] #app .bg-black .text-white,
html[data-theme="light"] #app .aspect-video .text-white {
  color: #ffffff !important;
}

html[data-theme="light"] #app .text-slate-200 {
  color: var(--lm-text-secondary) !important;
}

html[data-theme="light"] #app .text-slate-300 {
  color: #4a5568 !important;
}

html[data-theme="light"] #app .text-slate-400 {
  color: var(--lm-text-muted) !important;
}

html[data-theme="light"] #app .text-slate-500 {
  color: var(--lm-text-muted) !important;
}

html[data-theme="light"] #app .text-slate-600 {
  color: #5a6570 !important;
}

/* Headline gradients */
html[data-theme="light"] .gradient-text {
  background: linear-gradient(180deg, #0f1419 0%, #2d3a47 55%, #5c6b7a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

html[data-theme="light"] .gradient-text-red {
  background: linear-gradient(135deg, #b91c1c 0%, var(--lm-accent-red) 45%, #f87171 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

html[data-theme="light"] .gradient-text .word-reveal,
html[data-theme="light"] .word-reveal.gradient-text {
  background: linear-gradient(180deg, #0f1419 0%, #2d3a47 55%, #5c6b7a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

html[data-theme="light"] .gradient-text-red .word-reveal,
html[data-theme="light"] .word-reveal.gradient-text-red {
  background: linear-gradient(135deg, #b91c1c 0%, var(--lm-accent-red) 45%, #f87171 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

html[data-theme="light"] .tilt-card:hover .card-title {
  background: linear-gradient(135deg, #0f1419, var(--lm-accent-red-soft));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

html[data-theme="light"] .link-hover:hover {
  color: var(--lm-text) !important;
}

html[data-theme="light"] .faq-item:hover .faq-title {
  color: var(--lm-text) !important;
}

html[data-theme="light"] .tilt-card:hover {
  border-color: var(--lm-border-strong) !important;
  box-shadow: var(--lm-shadow-md), 0 0 0 1px var(--lm-border) !important;
}

html[data-theme="light"] .demo-card:hover {
  border-color: var(--lm-border-strong) !important;
  box-shadow: var(--lm-shadow-md) !important;
}

html[data-theme="light"] .pricing-card:hover {
  box-shadow: var(--lm-shadow-md) !important;
}

html[data-theme="light"] .pricing-popular {
  box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.22), var(--lm-shadow-md) !important;
}

html[data-theme="light"] [class*="shadow-black"] {
  box-shadow: var(--lm-shadow-md) !important;
}

html[data-theme="light"] .glow-line {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(220, 38, 38, 0.35),
    rgba(245, 158, 11, 0.22),
    rgba(220, 38, 38, 0.35),
    transparent
  );
}

/* Shared toggle */
.btn-tn-theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.06);
  color: #94a3b8;
  cursor: pointer;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}

.btn-tn-theme:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

html[data-theme="light"] .btn-tn-theme {
  border-color: var(--lm-border-strong);
  background: var(--lm-surface);
  color: var(--lm-text-muted);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

html[data-theme="light"] .btn-tn-theme:hover {
  color: var(--lm-text);
  background: var(--lm-surface-raised);
  border-color: rgba(15, 23, 42, 0.12);
}

/* Theme toggle icon visibility */
html[data-theme="dark"] .theme-toggle-sun {
  display: block;
}

html[data-theme="dark"] .theme-toggle-moon {
  display: none;
}

html[data-theme="light"] .theme-toggle-sun {
  display: none;
}

html[data-theme="light"] .theme-toggle-moon {
  display: block;
}

html[data-theme="light"] [data-theme-toggle] {
  color: var(--lm-text-muted);
}

html[data-theme="light"] [data-theme-toggle]:hover {
  color: var(--lm-text);
  background-color: rgba(15, 23, 42, 0.05);
}

html[data-theme="light"] nav a:hover,
html[data-theme="light"] nav [data-mobile-toggle]:hover,
html[data-theme="light"] #mobileMenu a:hover,
html[data-theme="light"] #mobileMenu [data-mobile-close]:hover {
  color: var(--lm-text) !important;
}
