/* Social website — light & dark theme tokens */
:root,
[data-theme="dark"] {
  color-scheme: dark;
  --site-bg: #020617;
  --site-bg-elevated: #0f172a;
  --site-text: #f8fafc;
  --site-text-muted: #94a3b8;
  --site-text-subtle: #64748b;
  --site-border: rgba(148, 163, 184, 0.12);
  --site-glass: rgba(15, 23, 42, 0.55);
  --site-glass-card: linear-gradient(145deg, rgba(30, 41, 59, 0.6), rgba(15, 23, 42, 0.8));
  --site-nav-scrolled: rgba(2, 6, 23, 0.85);
  --site-hero-bg:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(99, 102, 241, 0.35), transparent),
    radial-gradient(ellipse 60% 40% at 80% 20%, rgba(56, 189, 248, 0.12), transparent),
    radial-gradient(ellipse 50% 30% at 10% 60%, rgba(168, 85, 247, 0.1), transparent),
    #020617;
  --site-grid-opacity: 0.4;
  --theme-toggle-bg: rgba(15, 23, 42, 0.9);
  --theme-toggle-border: rgba(148, 163, 184, 0.15);
}

[data-theme="light"] {
  color-scheme: light;
  --site-bg: #f1f5f9;
  --site-bg-elevated: #ffffff;
  --site-text: #0f172a;
  --site-text-muted: #475569;
  --site-text-subtle: #64748b;
  --site-border: rgba(15, 23, 42, 0.08);
  --site-glass: rgba(255, 255, 255, 0.82);
  --site-glass-card: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(241, 245, 249, 0.98));
  --site-nav-scrolled: rgba(255, 255, 255, 0.92);
  --site-hero-bg:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(99, 102, 241, 0.18), transparent),
    radial-gradient(ellipse 60% 40% at 80% 20%, rgba(56, 189, 248, 0.1), transparent),
    radial-gradient(ellipse 50% 30% at 10% 60%, rgba(168, 85, 247, 0.08), transparent),
    #f8fafc;
  --site-grid-opacity: 0.55;
  --theme-toggle-bg: rgba(255, 255, 255, 0.95);
  --theme-toggle-border: rgba(15, 23, 42, 0.1);
}

body {
  background: var(--site-bg);
  color: var(--site-text);
  transition: background 0.35s ease, color 0.35s ease;
}

.hero-gradient { background: var(--site-hero-bg); }

.glass {
  background: var(--site-glass) !important;
  border-color: var(--site-border) !important;
}

.glass-card {
  background: var(--site-glass-card) !important;
  border-color: var(--site-border) !important;
}

.nav-scrolled {
  background: var(--site-nav-scrolled) !important;
  border-bottom-color: var(--site-border) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .text-gradient {
  background: linear-gradient(135deg, #0f172a 0%, #4338ca 45%, #6366f1 75%, #0284c7 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

[data-theme="light"] .hero-gradient .absolute.inset-0.bg-grid-pattern {
  opacity: var(--site-grid-opacity);
}

/* Tailwind utility overrides — light mode */
[data-theme="light"] .text-white { color: #0f172a !important; }
[data-theme="light"] .phone-frame .text-white,
[data-theme="light"] .lock-demo-phone .text-white,
[data-theme="light"] .showcase-phone .text-white,
[data-theme="light"] .hero-phone-device .text-white,
[data-theme="light"] #guest-demo-screen .text-white,
[data-theme="light"] #lock-demo-screen .text-white { color: #f8fafc !important; }
[data-theme="light"] .text-slate-200 { color: #334155 !important; }
[data-theme="light"] .text-slate-300 { color: #475569 !important; }
[data-theme="light"] .text-slate-400 { color: #64748b !important; }
[data-theme="light"] .text-slate-500 { color: #64748b !important; }
[data-theme="light"] .text-slate-600 { color: #94a3b8 !important; }
[data-theme="light"] .text-indigo-200\/80 { color: #4338ca !important; }
[data-theme="light"] .text-indigo-300 { color: #4f46e5 !important; }
[data-theme="light"] .text-amber-200\/70,
[data-theme="light"] .text-amber-200 { color: #b45309 !important; }
[data-theme="light"] .text-amber-100\/90 { color: #92400e !important; }

[data-theme="light"] .border-slate-800\/60,
[data-theme="light"] .border-slate-800\/40,
[data-theme="light"] .border-slate-800\/50 { border-color: rgba(15, 23, 42, 0.1) !important; }
[data-theme="light"] .border-slate-700\/50,
[data-theme="light"] .border-slate-700\/60 { border-color: rgba(15, 23, 42, 0.08) !important; }

[data-theme="light"] .bg-slate-950\/80,
[data-theme="light"] .bg-slate-950\/60,
[data-theme="light"] .bg-slate-950\/50,
[data-theme="light"] .bg-slate-950\/40 { background-color: rgba(241, 245, 249, 0.85) !important; }

[data-theme="light"] .stat-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(241, 245, 249, 0.9)) !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
}

[data-theme="light"] .stat-icon {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(56, 189, 248, 0.08)) !important;
}

[data-theme="light"] code.bg-slate-800,
[data-theme="light"] code.bg-slate-800\/60 {
  background: rgba(99, 102, 241, 0.1) !important;
  color: #4338ca !important;
}

[data-theme="light"] .theme-toggle-btn:not(.active) { color: #64748b !important; }
[data-theme="light"] .feature-pill:not(.active) { color: #64748b !important; border-color: rgba(15, 23, 42, 0.12) !important; }

[data-theme="light"] .legal-prose h1 { color: #0f172a; }
[data-theme="light"] .legal-prose h2 { color: #1e293b; }
[data-theme="light"] .legal-prose h3 { color: #334155; }
[data-theme="light"] .legal-prose p,
[data-theme="light"] .legal-prose li { color: #475569; }
[data-theme="light"] .legal-meta { color: #64748b; }

/* Keep dark phone mockups & store buttons readable */
[data-theme="light"] .phone-frame,
[data-theme="light"] .lock-demo-phone,
[data-theme="light"] .showcase-phone { /* devices stay dark */ }

[data-theme="light"] a.rounded-2xl.bg-white.text-slate-900 .text-white,
[data-theme="light"] a.bg-white .text-white { color: #0f172a !important; }

[data-theme="light"] .btn-shimmer,
[data-theme="light"] .bg-indigo-600,
[data-theme="light"] .bg-amber-600,
[data-theme="light"] .btn-shimmer .text-white { color: #fff !important; }

/* Side theme toggle widget */
#theme-toggle-widget {
  position: fixed;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.35rem;
  border-radius: 9999px;
  background: var(--theme-toggle-bg);
  border: 1px solid var(--theme-toggle-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

#theme-toggle-widget button {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s, transform 0.2s;
  color: var(--site-text-muted);
}

#theme-toggle-widget button:hover {
  background: rgba(99, 102, 241, 0.12);
  color: var(--site-text);
}

#theme-toggle-widget button.active {
  background: rgba(99, 102, 241, 0.2);
  color: #6366f1;
  box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.35);
}

#theme-toggle-widget button svg {
  width: 1.15rem;
  height: 1.15rem;
}

@media (max-width: 640px) {
  #theme-toggle-widget {
    right: 0.65rem;
    top: auto;
    bottom: 5.5rem;
    transform: none;
    flex-direction: row;
  }
}