:root {
  color-scheme: light;
  --theme-bg: #f8fafc;
  --theme-bg-alt: #eef2f7;
  --theme-surface: #ffffff;
  --theme-surface-elevated: #f1f5f9;
  --theme-surface-muted: #e2e8f0;
  --theme-border: rgba(148, 163, 184, 0.32);
  --theme-border-strong: rgba(100, 116, 139, 0.5);
  --theme-text: #0f172a;
  --theme-text-muted: #475569;
  --theme-text-soft: #64748b;
  --theme-text-rgb: 15, 23, 42;
  --theme-inverse: #0f172a;
  --theme-inverse-contrast: #f8fafc;
  --theme-primary: #2563eb;
  --theme-primary-hover: #1d4ed8;
  --theme-secondary: #38bdf8;
  --theme-secondary-rgb: 56, 189, 248;
  --theme-accent: #6366f1;
  --theme-accent-rgb: 99, 102, 241;
  --theme-success: #16a34a;
  --theme-danger: #dc2626;
  --theme-warning: #f59e0b;
  --theme-gradient-from: #0ea5e9;
  --theme-gradient-to: #2563eb;
  --theme-shadow-soft: 0 10px 30px rgba(15, 23, 42, 0.1);
  --theme-shadow-strong: 0 30px 60px rgba(15, 23, 42, 0.18);
  --theme-glass-surface: rgba(255, 255, 255, 0.7);
  --theme-toggle-bg: rgba(241, 245, 249, 0.9);
  --theme-toggle-border: rgba(15, 23, 42, 0.08);
  --theme-toggle-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);

  /* Brand palette */
  --theme-primary-50: #eff6ff;
  --theme-primary-100: #dbeafe;
  --theme-primary-200: #bfdbfe;
  --theme-primary-300: #93c5fd;
  --theme-primary-400: #60a5fa;
  --theme-primary-500: #3b82f6;
  --theme-primary-600: #2563eb;
  --theme-primary-700: #1d4ed8;
  --theme-primary-800: #1e40af;
  --theme-primary-900: #1e3a8a;
  --theme-primary-rgb: 37, 99, 235;

  --theme-success-50: #ecfdf3;
  --theme-success-100: #d1fae5;
  --theme-success-200: #a7f3d0;
  --theme-success-300: #6ee7b7;
  --theme-success-400: #34d399;
  --theme-success-500: #22c55e;
  --theme-success-600: #16a34a;
  --theme-success-700: #15803d;
  --theme-success-800: #166534;
  --theme-success-900: #14532d;
  --theme-success-rgb: 34, 197, 94;

  --theme-warning-50: #fffbeb;
  --theme-warning-100: #fef3c7;
  --theme-warning-200: #fde68a;
  --theme-warning-300: #fcd34d;
  --theme-warning-400: #fbbf24;
  --theme-warning-500: #f59e0b;
  --theme-warning-600: #d97706;
  --theme-warning-700: #b45309;
  --theme-warning-800: #92400e;
  --theme-warning-900: #78350f;
  --theme-warning-rgb: 245, 158, 11;

  --theme-danger-50: #fef2f2;
  --theme-danger-100: #fee2e2;
  --theme-danger-200: #fecdd3;
  --theme-danger-300: #fca5a5;
  --theme-danger-400: #f87171;
  --theme-danger-500: #ef4444;
  --theme-danger-600: #dc2626;
  --theme-danger-700: #b91c1c;
  --theme-danger-800: #991b1b;
  --theme-danger-900: #7f1d1d;
  --theme-danger-rgb: 239, 68, 68;

  --theme-contrast-rgb: 248, 250, 252;
  --theme-inverse-rgb: 15, 23, 42;
  --theme-glass-rgb: 255, 255, 255;

  /* Hero and glass tokens */
  --hero-landing-from: #ffffff;
  --hero-landing-to: #f4f7ff;
  --hero-landing-text: var(--theme-text);
  --hero-landing-grid: rgba(15, 23, 42, 0.06);
  --hero-card-bg: #ffffff;
  --hero-card-border: #e5e7eb;
  --hero-card-shadow: 0 25px 60px rgba(15, 23, 42, 0.08);
  --hero-spot-1: rgba(147, 197, 253, 0.35);
  --hero-spot-2: rgba(59, 130, 246, 0.35);
  --hero-landing-angle-from: #0f172a;
  --hero-landing-angle-mid: #1d4ed8;
  --hero-landing-angle-to: #0ea5e9;

  --overlay-05: rgba(var(--theme-glass-rgb), 0.05);
  --overlay-10: rgba(var(--theme-glass-rgb), 0.1);
  --overlay-15: rgba(var(--theme-glass-rgb), 0.15);
  --overlay-20: rgba(var(--theme-glass-rgb), 0.2);
  --overlay-25: rgba(var(--theme-glass-rgb), 0.25);
  --overlay-30: rgba(var(--theme-glass-rgb), 0.3);
  --overlay-40: rgba(var(--theme-glass-rgb), 0.4);
  --overlay-80: rgba(var(--theme-glass-rgb), 0.8);
  --overlay-90: rgba(var(--theme-glass-rgb), 0.9);
  --overlay-95: rgba(var(--theme-glass-rgb), 0.95);
}

[data-theme="dark"] {
  color-scheme: dark;
  --theme-bg: #0b1120;
  --theme-bg-alt: #0f172a;
  --theme-surface: #111827;
  --theme-surface-elevated: #1f2937;
  --theme-surface-muted: #1e293b;
  --theme-border: rgba(71, 85, 105, 0.5);
  --theme-border-strong: rgba(148, 163, 184, 0.48);
  --theme-text: #e2e8f0;
  --theme-text-muted: #cbd5f5;
  --theme-text-soft: #94a3b8;
  --theme-text-rgb: 226, 232, 240;
  --theme-inverse: #f8fafc;
  --theme-inverse-contrast: #020617;
  --theme-primary: #60a5fa;
  --theme-primary-hover: #3b82f6;
  --theme-secondary: #38bdf8;
  --theme-secondary-rgb: 56, 189, 248;
  --theme-accent: #818cf8;
  --theme-accent-rgb: 129, 140, 248;
  --theme-success: #34d399;
  --theme-danger: #f87171;
  --theme-warning: #fbbf24;
  --theme-gradient-from: #0f172a;
  --theme-gradient-to: #1e3a8a;
  --theme-shadow-soft: 0 10px 30px rgba(15, 23, 42, 0.35);
  --theme-shadow-strong: 0 35px 70px rgba(15, 23, 42, 0.55);
  --theme-glass-surface: rgba(15, 23, 42, 0.65);
  --theme-toggle-bg: rgba(15, 23, 42, 0.92);
  --theme-toggle-border: rgba(148, 163, 184, 0.35);
  --theme-toggle-shadow: 0 22px 44px rgba(2, 6, 23, 0.45);

  --theme-primary-50: #e0eaff;
  --theme-primary-100: #c0d4ff;
  --theme-primary-200: #9bb9ff;
  --theme-primary-300: #729cff;
  --theme-primary-400: #4d83ff;
  --theme-primary-500: #3b82f6;
  --theme-primary-600: #60a5fa;
  --theme-primary-700: #7ab5ff;
  --theme-primary-800: #a7cdff;
  --theme-primary-900: #d7e6ff;
  --theme-primary-rgb: 96, 165, 250;

  --theme-success-rgb: 52, 211, 153;
  --theme-warning-rgb: 251, 191, 36;
  --theme-danger-rgb: 248, 113, 113;
  --theme-inverse-rgb: 248, 250, 252;
  --theme-glass-rgb: 248, 250, 252;

  --hero-landing-from: #0b1224;
  --hero-landing-to: #0f172a;
  --hero-landing-text: #e2e8f0;
  --hero-landing-grid: rgba(226, 232, 240, 0.18);
  --hero-card-bg: #0f172a;
  --hero-card-border: rgba(226, 232, 240, 0.15);
  --hero-card-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  --hero-spot-1: rgba(96, 165, 250, 0.28);
  --hero-spot-2: rgba(37, 99, 235, 0.32);
  --hero-landing-angle-from: #0b1120;
  --hero-landing-angle-mid: #1e3a8a;
  --hero-landing-angle-to: #2563eb;
}

html,
body {
  background-color: var(--theme-bg);
  color: var(--theme-text);
}

html {
  scroll-behavior: smooth;
}

body {
  transition: background-color 0.25s ease, color 0.2s ease;
  background-color: var(--theme-bg) !important;
  color: var(--theme-text) !important;
}

a {
  color: inherit;
}

.gradient-hero {
  background: linear-gradient(180deg, var(--hero-landing-from) 0%, var(--hero-landing-to) 100%);
  color: var(--hero-landing-text);
}

.hero-grid-lines {
  background-image: radial-gradient(var(--hero-landing-grid) 1px, transparent 0);
  background-size: 30px 30px;
  opacity: 0.18;
}

.hero-card {
  background: var(--hero-card-bg);
  border: 1px solid var(--hero-card-border);
  border-radius: 1.75rem;
  box-shadow: var(--hero-card-shadow);
  color: var(--hero-landing-text);
}

.hero-gradient {
  background: radial-gradient(circle at 10% 20%, var(--hero-spot-1), transparent 25%),
    radial-gradient(circle at 80% 0%, var(--hero-spot-2), transparent 30%),
    linear-gradient(135deg, var(--hero-landing-angle-from) 0%, var(--hero-landing-angle-mid) 50%, var(--hero-landing-angle-to) 100%);
  color: rgba(var(--theme-contrast-rgb), 1);
}

.faq-content {
  transition: max-height 0.3s ease, opacity 0.25s ease;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}

.faq-item.active .faq-content {
  max-height: 400px;
  opacity: 1;
}

.floating,
.floating-badge {
  animation: float 6s ease-in-out infinite;
}

.cta-pulse,
.badge-pulse {
  animation: pulse 2.4s infinite;
}

.hero-tilt {
  animation: softFloat 8s ease-in-out infinite;
}

.hero-fade {
  animation: fadeUp 0.8s ease forwards;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.04);
  }
}

@keyframes softFloat {
  0%,
  100% {
    transform: translateY(0) translateX(0);
  }

  50% {
    transform: translateY(-10px) translateX(6px);
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.theme-surface {
  background: var(--theme-surface);
}

.theme-surface-elevated {
  background: var(--theme-surface-elevated);
  box-shadow: var(--theme-shadow-soft);
}

.theme-border {
  border-color: var(--theme-border);
}

.theme-primary {
  background: var(--theme-primary);
  color: var(--theme-inverse-contrast);
}

.theme-primary:hover {
  background: var(--theme-primary-hover);
}

/* Tailwind utility overrides for dark theme */
[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-gray-50,
[data-theme="dark"] .bg-slate-50,
[data-theme="dark"] .bg-zinc-50 {
  background-color: var(--theme-surface-elevated) !important;
}

[data-theme="dark"] .bg-gray-100,
[data-theme="dark"] .bg-slate-100,
[data-theme="dark"] .bg-zinc-100 {
  background-color: var(--theme-surface-muted) !important;
}

[data-theme="dark"] .text-gray-900,
[data-theme="dark"] .text-slate-900,
[data-theme="dark"] .text-neutral-900 {
  color: var(--theme-inverse) !important;
}

[data-theme="dark"] .text-gray-800,
[data-theme="dark"] .text-slate-800,
[data-theme="dark"] .text-neutral-800 {
  color: var(--theme-text) !important;
}

[data-theme="dark"] .text-gray-700,
[data-theme="dark"] .text-slate-700,
[data-theme="dark"] .text-neutral-700 {
  color: var(--theme-text-muted) !important;
}

[data-theme="dark"] .text-gray-600,
[data-theme="dark"] .text-slate-600,
[data-theme="dark"] .text-neutral-600 {
  color: var(--theme-text-soft) !important;
}

[data-theme="dark"] .text-gray-500,
[data-theme="dark"] .text-slate-500,
[data-theme="dark"] .text-neutral-500,
[data-theme="dark"] .text-gray-450,
[data-theme="dark"] .text-slate-450,
[data-theme="dark"] .text-neutral-450 {
  color: rgba(226, 232, 240, 0.78) !important;
}

[data-theme="dark"] .text-gray-400,
[data-theme="dark"] .text-slate-400,
[data-theme="dark"] .text-neutral-400 {
  color: rgba(226, 232, 240, 0.7) !important;
}

[data-theme="dark"] .text-gray-300,
[data-theme="dark"] .text-slate-300,
[data-theme="dark"] .text-neutral-300,
[data-theme="dark"] .text-gray-200,
[data-theme="dark"] .text-slate-200,
[data-theme="dark"] .text-neutral-200 {
  color: rgba(226, 232, 240, 0.62) !important;
}

[data-theme="dark"] .text-gray-100,
[data-theme="dark"] .text-slate-100,
[data-theme="dark"] .text-neutral-100 {
  color: rgba(226, 232, 240, 0.9) !important;
}

[data-theme="dark"] .text-black,
[data-theme="dark"] .text-black-800,
[data-theme="dark"] .text-black-700,
[data-theme="dark"] .text-black-600 {
  color: var(--theme-text) !important;
}

[data-theme="dark"] .text-black-500,
[data-theme="dark"] .text-black-400,
[data-theme="dark"] .text-black-300,
[data-theme="dark"] .text-black-200 {
  color: rgba(226, 232, 240, 0.8) !important;
}

[data-theme="dark"] .border-gray-200,
[data-theme="dark"] .border-slate-200,
[data-theme="dark"] .border-neutral-200 {
  border-color: var(--theme-border) !important;
}

/* Neutral palette mapped to tokens */
.text-gray-900,
.text-gray-800,
.text-slate-900,
.text-slate-800,
.text-black,
.text-black-800 {
  color: var(--theme-text) !important;
}

.text-gray-700,
.text-slate-700 {
  color: var(--theme-text-muted) !important;
}

.text-gray-600,
.text-slate-600,
.text-neutral-600 {
  color: var(--theme-text-soft) !important;
}

.text-gray-500,
.text-slate-500,
.text-neutral-500 {
  color: rgba(var(--theme-text-rgb), 0.72) !important;
}

.text-gray-400,
.text-slate-400,
.text-neutral-400 {
  color: rgba(var(--theme-text-rgb), 0.65) !important;
}

.text-gray-300,
.text-slate-300,
.text-neutral-300,
.text-gray-200,
.text-slate-200,
.text-neutral-200 {
  color: rgba(var(--theme-text-rgb), 0.52) !important;
}

.text-gray-100,
.text-slate-100,
.text-neutral-100 {
  color: rgba(var(--theme-text-rgb), 0.32) !important;
}

.text-indigo-200 {
  color: rgba(var(--theme-accent-rgb), 0.72) !important;
}

.text-indigo-700,
.text-indigo-800,
.text-indigo-900,
.text-purple-600,
.text-purple-700 {
  color: var(--theme-accent) !important;
}

.text-yellow-400 {
  color: var(--theme-warning-400) !important;
}

.text-yellow-600,
.text-yellow-700,
.text-yellow-800 {
  color: var(--theme-warning-600) !important;
}

.bg-gray-50,
.bg-slate-50 {
  background-color: var(--theme-bg-alt) !important;
}

.bg-slate-50\/80 {
  background-color: rgba(var(--theme-contrast-rgb), 0.8) !important;
}

.bg-gray-100,
.bg-slate-100,
.bg-gray-200,
.bg-gray-300,
.bg-slate-300 {
  background-color: var(--theme-surface-elevated) !important;
}

.bg-gray-600 {
  background-color: rgba(var(--theme-inverse-rgb), 0.65) !important;
}

.bg-gray-900,
.bg-slate-900,
.bg-gray-950,
.bg-slate-950 {
  background-color: rgba(var(--theme-inverse-rgb), 0.92) !important;
  color: rgba(var(--theme-contrast-rgb), 0.96);
}

.bg-slate-900\/60 {
  background-color: rgba(var(--theme-inverse-rgb), 0.6) !important;
}

.bg-slate-900\/70 {
  background-color: rgba(var(--theme-inverse-rgb), 0.7) !important;
}

.bg-black-200 {
  background-color: rgba(var(--theme-inverse-rgb), 0.12) !important;
}

.bg-red-50 {
  background-color: rgba(var(--theme-danger-rgb), 0.12) !important;
}

.bg-indigo-100 {
  background-color: rgba(var(--theme-accent-rgb), 0.14) !important;
}

.bg-indigo-500\/15 {
  background-color: rgba(var(--theme-accent-rgb), 0.15) !important;
}

.bg-indigo-600,
.bg-indigo-700 {
  background-color: var(--theme-accent) !important;
}

.bg-slate-50,
.bg-slate-100,
.bg-gray-50,
.bg-gray-100,
.bg-gray-200,
.bg-gray-300,
.bg-slate-300 {
  color: var(--theme-text);
}

/* Theme-aware brand utilities */
.text-blue-50,
.text-blue-100,
.text-blue-200 {
  color: var(--theme-primary-200) !important;
}

.text-blue-300,
.text-blue-400 {
  color: var(--theme-primary-400) !important;
}

.text-blue-500 {
  color: var(--theme-primary-500) !important;
}

.text-blue-600 {
  color: var(--theme-primary-600) !important;
}

.text-blue-700,
.text-blue-800,
.text-blue-900 {
  color: var(--theme-primary-700) !important;
}

.text-emerald-100,
.text-emerald-200 {
  color: var(--theme-success-200) !important;
}

.text-emerald-300 {
  color: var(--theme-success-300) !important;
}

.text-emerald-400,
.text-emerald-500 {
  color: var(--theme-success-500) !important;
}

.text-emerald-600,
.text-emerald-700 {
  color: var(--theme-success-700) !important;
}

.text-green-600 {
  color: var(--theme-success-600) !important;
}

.text-yellow-200,
.text-yellow-300 {
  color: var(--theme-warning-300) !important;
}

.text-amber-300 {
  color: var(--theme-warning-300) !important;
}

.text-amber-500,
.text-amber-600 {
  color: var(--theme-warning-500) !important;
}

.text-amber-700 {
  color: var(--theme-warning-700) !important;
}

.text-red-500,
.text-red-600 {
  color: var(--theme-danger-600) !important;
}

.text-red-700 {
  color: var(--theme-danger-700) !important;
}

.bg-blue-50,
.bg-blue-100,
.bg-blue-200 {
  background-color: rgba(var(--theme-primary-rgb), 0.1) !important;
}

.bg-blue-300,
.bg-blue-400,
.bg-blue-500 {
  background-color: rgba(var(--theme-primary-rgb), 0.16) !important;
}

.bg-blue-50\/60 {
  background-color: rgba(var(--theme-primary-rgb), 0.6) !important;
}

.bg-blue-200\/40 {
  background-color: rgba(var(--theme-primary-rgb), 0.4) !important;
}

.bg-blue-400\/20 {
  background-color: rgba(var(--theme-primary-rgb), 0.2) !important;
}

.bg-blue-500\/15 {
  background-color: rgba(var(--theme-primary-rgb), 0.15) !important;
}

.bg-blue-600\/30,
.bg-blue-900\/30 {
  background-color: rgba(var(--theme-primary-rgb), 0.3) !important;
}

.bg-blue-600 {
  background-color: var(--theme-primary) !important;
}

.bg-blue-700,
.bg-blue-800,
.bg-blue-900 {
  background-color: var(--theme-primary-hover) !important;
}

.border-blue-50,
.border-blue-100,
.border-blue-200 {
  border-color: rgba(var(--theme-primary-rgb), 0.25) !important;
}

.border-blue-300,
.border-blue-400,
.border-blue-500 {
  border-color: rgba(var(--theme-primary-rgb), 0.35) !important;
}

.border-blue-600,
.border-blue-700,
.border-blue-800 {
  border-color: var(--theme-primary-hover) !important;
}

.bg-emerald-50,
.bg-emerald-100,
.bg-emerald-200 {
  background-color: rgba(var(--theme-success-rgb), 0.12) !important;
}

.bg-emerald-300,
.bg-emerald-400 {
  background-color: rgba(var(--theme-success-rgb), 0.2) !important;
}

.bg-emerald-500,
.bg-green-500 {
  background-color: var(--theme-success-500) !important;
}

.bg-emerald-600,
.bg-green-600 {
  background-color: var(--theme-success-600) !important;
}

.bg-emerald-400\/10,
.bg-emerald-500\/10 {
  background-color: rgba(var(--theme-success-rgb), 0.1) !important;
}

.bg-emerald-200\/20,
.bg-emerald-400\/20,
.bg-emerald-500\/20 {
  background-color: rgba(var(--theme-success-rgb), 0.2) !important;
}

.bg-emerald-400\/80 {
  background-color: rgba(var(--theme-success-rgb), 0.8) !important;
}

.bg-emerald-50\/60 {
  background-color: rgba(var(--theme-success-rgb), 0.6) !important;
}

.border-emerald-100,
.border-emerald-200,
.border-emerald-300 {
  border-color: rgba(var(--theme-success-rgb), 0.28) !important;
}

.border-emerald-300\/60 {
  border-color: rgba(var(--theme-success-rgb), 0.6) !important;
}

.border-emerald-400\/20,
.border-emerald-500\/20 {
  border-color: rgba(var(--theme-success-rgb), 0.2) !important;
}

.bg-yellow-200,
.bg-yellow-300 {
  background-color: rgba(var(--theme-warning-rgb), 0.24) !important;
}

.bg-amber-100 {
  background-color: rgba(var(--theme-warning-rgb), 0.16) !important;
}

.bg-amber-50\/40 {
  background-color: rgba(var(--theme-warning-rgb), 0.4) !important;
}

.bg-amber-50\/60 {
  background-color: rgba(var(--theme-warning-rgb), 0.6) !important;
}

.bg-amber-300\/70 {
  background-color: rgba(var(--theme-warning-rgb), 0.7) !important;
}

.bg-amber-400\/20 {
  background-color: rgba(var(--theme-warning-rgb), 0.2) !important;
}

.bg-amber-400\/40 {
  background-color: rgba(var(--theme-warning-rgb), 0.4) !important;
}

.bg-purple-50\/60 {
  background-color: rgba(var(--theme-accent-rgb), 0.6) !important;
}

.border-amber-100,
.border-amber-300 {
  border-color: rgba(var(--theme-warning-rgb), 0.28) !important;
}

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

.border-red-200,
.border-red-300 {
  border-color: rgba(var(--theme-danger-rgb), 0.32) !important;
}

.border-amber-400\/40 {
  border-color: rgba(var(--theme-warning-rgb), 0.4) !important;
}

.border-red-500,
.border-red-600,
.border-red-700 {
  border-color: var(--theme-danger-600) !important;
}

.text-white {
  color: rgba(var(--theme-contrast-rgb), 1) !important;
}

.text-white\/60 {
  color: rgba(var(--theme-contrast-rgb), 0.6) !important;
}

.text-white\/70 {
  color: rgba(var(--theme-contrast-rgb), 0.7) !important;
}

.text-white\/80 {
  color: rgba(var(--theme-contrast-rgb), 0.8) !important;
}

.text-white\/85 {
  color: rgba(var(--theme-contrast-rgb), 0.85) !important;
}

.text-white\/90 {
  color: rgba(var(--theme-contrast-rgb), 0.9) !important;
}

.bg-white\/5 {
  background-color: var(--overlay-05) !important;
}

.bg-white\/10 {
  background-color: var(--overlay-10) !important;
}

.bg-white\/15 {
  background-color: var(--overlay-15) !important;
}

.bg-white\/20 {
  background-color: var(--overlay-20) !important;
}

.bg-white\/25 {
  background-color: var(--overlay-25) !important;
}

.bg-white\/30 {
  background-color: var(--overlay-30) !important;
}

.bg-white\/80 {
  background-color: var(--overlay-80) !important;
}

.bg-white\/90 {
  background-color: var(--overlay-90) !important;
}

.bg-white\/95 {
  background-color: var(--overlay-95) !important;
}

.border-white\/10 {
  border-color: rgba(var(--theme-contrast-rgb), 0.1) !important;
}

.border-white\/20 {
  border-color: rgba(var(--theme-contrast-rgb), 0.2) !important;
}

.border-white\/25 {
  border-color: rgba(var(--theme-contrast-rgb), 0.25) !important;
}

.border-white\/30 {
  border-color: rgba(var(--theme-contrast-rgb), 0.3) !important;
}

.border-white\/40 {
  border-color: rgba(var(--theme-contrast-rgb), 0.4) !important;
}

.from-blue-50 {
  --tw-gradient-from: rgba(var(--theme-primary-rgb), 0.08) !important;
  --tw-gradient-to: rgba(var(--theme-primary-rgb), 0) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.from-blue-600 {
  --tw-gradient-from: var(--theme-primary) !important;
  --tw-gradient-to: rgba(var(--theme-primary-rgb), 0) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.via-indigo-600 {
  --tw-gradient-stops: var(--tw-gradient-from), rgba(var(--theme-accent-rgb), 0.9), var(--tw-gradient-to) !important;
}

.to-slate-900 {
  --tw-gradient-to: var(--theme-bg-alt) !important;
}

.from-emerald-500 {
  --tw-gradient-from: var(--theme-success-500) !important;
  --tw-gradient-to: rgba(var(--theme-success-rgb), 0) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.via-emerald-500 {
  --tw-gradient-stops: var(--tw-gradient-from), rgba(var(--theme-success-rgb), 0.65), var(--tw-gradient-to) !important;
}

.from-emerald-500\/10 {
  --tw-gradient-from: rgba(var(--theme-success-rgb), 0.1) !important;
  --tw-gradient-to: rgba(var(--theme-success-rgb), 0) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.via-emerald-500\/5 {
  --tw-gradient-stops: var(--tw-gradient-from), rgba(var(--theme-success-rgb), 0.05), var(--tw-gradient-to) !important;
}

/* Hover utilities with theme variables */
.hover\:bg-blue-50:hover,
.hover\:bg-blue-100:hover {
  background-color: rgba(var(--theme-primary-rgb), 0.12) !important;
}

.hover\:bg-blue-200:hover {
  background-color: rgba(var(--theme-primary-rgb), 0.18) !important;
}

.hover\:bg-blue-500:hover {
  background-color: var(--theme-primary-500) !important;
}

.hover\:bg-blue-600:hover,
.hover\:bg-blue-700:hover {
  background-color: var(--theme-primary-hover) !important;
}

.hover\:bg-white\/10:hover {
  background-color: var(--overlay-10) !important;
}

.hover\:bg-white\/15:hover {
  background-color: var(--overlay-15) !important;
}

.hover\:bg-white\/20:hover {
  background-color: var(--overlay-20) !important;
}

.hover\:bg-emerald-300:hover {
  background-color: var(--theme-success-300) !important;
}

.hover\:bg-emerald-600:hover,
.hover\:bg-green-600:hover {
  background-color: var(--theme-success-600) !important;
}

.hover\:bg-gray-300:hover {
  background-color: var(--theme-surface-muted) !important;
}

.hover\:bg-indigo-700:hover {
  background-color: var(--theme-accent) !important;
}

.hover\:bg-yellow-200:hover {
  background-color: rgba(var(--theme-warning-rgb), 0.32) !important;
}

.hover\:border-blue-200:hover {
  border-color: rgba(var(--theme-primary-rgb), 0.28) !important;
}

.hover\:border-blue-300:hover {
  border-color: rgba(var(--theme-primary-rgb), 0.32) !important;
}

.hover\:border-blue-400:hover {
  border-color: rgba(var(--theme-primary-rgb), 0.38) !important;
}

.hover\:border-blue-500:hover {
  border-color: var(--theme-primary-600) !important;
}

.hover\:border-white\/40:hover {
  border-color: rgba(var(--theme-contrast-rgb), 0.4) !important;
}

.hover\:text-blue-100:hover {
  color: var(--theme-primary-200) !important;
}

.hover\:text-blue-400:hover {
  color: var(--theme-primary-400) !important;
}

.hover\:text-blue-600:hover {
  color: var(--theme-primary-600) !important;
}

.hover\:text-blue-700:hover,
.hover\:text-blue-800:hover {
  color: var(--theme-primary-700) !important;
}

.hover\:text-white:hover {
  color: rgba(var(--theme-contrast-rgb), 1) !important;
}

[data-theme="dark"] .shadow-lg,
[data-theme="dark"] .shadow-md,
[data-theme="dark"] .shadow {
  --tw-shadow-color: rgba(2, 6, 23, 0.55);
  --tw-shadow: 0 30px 70px var(--tw-shadow-color);
  box-shadow: var(--tw-shadow);
}

[data-theme="dark"] .glass,
[data-theme="dark"] .glass-panel,
[data-theme="dark"] .backdrop-blur {
  background: var(--theme-glass-surface);
}

[data-theme="dark"] .bg-gray-200,
[data-theme="dark"] .bg-gray-300,
[data-theme="dark"] .bg-gray-200\/80,
[data-theme="dark"] .bg-gray-100,
[data-theme="dark"] .bg-gray-100\/80,
[data-theme="dark"] .bg-black-200,
[data-theme="dark"] .bg-black-100 {
  background-color: rgba(148, 163, 184, 0.18) !important;
}

/* Floating theme control */
.theme-toggle {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  font-family: inherit;
}

.theme-toggle__button {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  border: 1px solid var(--theme-toggle-border);
  background: var(--theme-toggle-bg);
  box-shadow: var(--theme-toggle-shadow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  color: var(--theme-text);
}

.theme-toggle__button:hover,
.theme-toggle__button:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 24px 50px rgba(15, 23, 42, 0.14);
  outline: none;
}

.theme-toggle__button svg {
  width: 24px;
  height: 24px;
}

.theme-toggle__popover {
  min-width: 220px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid var(--theme-toggle-border);
  background: var(--theme-toggle-bg);
  box-shadow: var(--theme-toggle-shadow);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transform-origin: bottom right;
  animation: theme-pop-in 0.2s ease forwards;
}

.theme-toggle__option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--theme-text);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.theme-toggle__option:hover,
.theme-toggle__option.theme-active {
  background: rgba(99, 102, 241, 0.12);
  color: var(--theme-primary-hover);
}

.theme-toggle__option svg {
  width: 20px;
  height: 20px;
}

.theme-toggle__hint {
  font-size: 0.75rem;
  color: var(--theme-text-soft);
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--theme-border);
}

@media (max-width: 600px) {
  .theme-toggle {
    bottom: 16px;
    right: 16px;
  }

  .theme-toggle__popover {
    min-width: 180px;
  }

  .mobile-hidden-index{
    display: none;
  }
}

@keyframes theme-pop-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}