/* ============================================
   VARIABLEVAULT — LIGHT/DARK THEME SYSTEM
   ============================================ */

/* --- Theme Toggle Icon Swap --- */
.theme-moon { display: none; }
html.light .theme-sun { display: none !important; }
html.light .theme-moon { display: block !important; }

/* --- Smooth Transition --- */
body, nav, footer, main, section, header, article,
div, a, p, span, h1, h2, h3, h4, li, ul, button, code {
  transition: background-color 0.35s ease, color 0.25s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

/* ================================
   LIGHT MODE OVERRIDES
   ================================ */

html.light {
  color-scheme: light;
}

/* --- Base --- */
html.light body {
  background-color: #f8fafc !important;
  color: #1e293b !important;
}

/* --- Backgrounds: Gray Scale --- */
html.light .bg-gray-950 {
  background-color: #ffffff !important;
}
html.light .bg-gray-950\/70 {
  background-color: rgba(255, 255, 255, 0.78) !important;
}
html.light .bg-gray-950\/80 {
  background-color: rgba(255, 255, 255, 0.85) !important;
}
html.light .bg-gray-950\/90 {
  background-color: rgba(255, 255, 255, 0.92) !important;
}
html.light .bg-gray-950\/95 {
  background-color: rgba(255, 255, 255, 0.96) !important;
}
html.light .bg-gray-900 {
  background-color: #f1f5f9 !important;
}
html.light .bg-gray-900\/50 {
  background-color: rgba(241, 245, 249, 0.75) !important;
}
html.light .bg-gray-900\/80 {
  background-color: rgba(241, 245, 249, 0.9) !important;
}
html.light .bg-gray-800 {
  background-color: #e2e8f0 !important;
}
html.light .bg-gray-800\/50 {
  background-color: rgba(226, 232, 240, 0.5) !important;
}
html.light .bg-gray-800\/80 {
  background-color: rgba(226, 232, 240, 0.8) !important;
}

/* --- Text: Gray Scale --- */
html.light .text-white {
  color: #0f172a !important;
}
html.light .text-gray-100 {
  color: #1e293b !important;
}
html.light .text-gray-200 {
  color: #334155 !important;
}
html.light .text-gray-300 {
  color: #475569 !important;
}
html.light .text-gray-400 {
  color: #64748b !important;
}
html.light .text-gray-500 {
  color: #94a3b8 !important;
}
html.light .text-gray-600 {
  color: #94a3b8 !important;
}
html.light .text-gray-800 {
  color: #cbd5e1 !important;
}

/* --- Borders --- */
html.light .border-white\/5 {
  border-color: rgba(15, 23, 42, 0.06) !important;
}
html.light .border-white\/10 {
  border-color: rgba(15, 23, 42, 0.1) !important;
}
html.light .border-white\/20 {
  border-color: rgba(15, 23, 42, 0.15) !important;
}

/* --- Hover States --- */
html.light .hover\:bg-white\/5:hover {
  background-color: rgba(15, 23, 42, 0.04) !important;
}
html.light .hover\:border-white\/20:hover {
  border-color: rgba(15, 23, 42, 0.12) !important;
}
html.light .hover\:border-white\/10:hover {
  border-color: rgba(15, 23, 42, 0.08) !important;
}

/* --- Subtle BG Tints --- */
html.light .bg-white\/5 {
  background-color: rgba(15, 23, 42, 0.03) !important;
}
html.light .bg-white\/3 {
  background-color: rgba(15, 23, 42, 0.02) !important;
}

/* --- Glass Effect --- */
html.light .glass {
  background: rgba(255, 255, 255, 0.55) !important;
  border-color: rgba(15, 23, 42, 0.06) !important;
}

/* --- CTA Section Gradient BG --- */
html.light .from-brand-950\/50 {
  --tw-gradient-from: rgba(59, 7, 100, 0.02) !important;
}
html.light .via-gray-950 {
  --tw-gradient-stops: var(--tw-gradient-from), #f8fafc, var(--tw-gradient-to) !important;
}
html.light .to-accent-950\/30 {
  --tw-gradient-to: rgba(23, 37, 84, 0.02) !important;
}

/* --- Shadows: Softer in Light Mode --- */
html.light .shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.06), 0 4px 6px -4px rgba(0, 0, 0, 0.06) !important;
}
html.light .shadow-xl {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.06), 0 8px 10px -6px rgba(0, 0, 0, 0.06) !important;
}
html.light .shadow-2xl {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1) !important;
}

/* --- Glow Animation: Softer --- */
html.light .animate-pulse-glow {
  animation-name: pulse-glow-light !important;
}
@keyframes pulse-glow-light {
  0%, 100% { box-shadow: 0 0 20px rgba(124, 58, 237, 0.06); }
  50% { box-shadow: 0 0 40px rgba(124, 58, 237, 0.12); }
}

/* --- Gradient Border: Keep visible in light --- */
html.light .gradient-border::before {
  opacity: 0.7;
}

/* --- Grid Pattern: Slightly darker on white --- */
html.light [style*="background-image"] {
  opacity: 0.04 !important;
}

/* --- Form Elements --- */
html.light input,
html.light textarea,
html.light select {
  background-color: #f1f5f9 !important;
  border-color: rgba(15, 23, 42, 0.1) !important;
  color: #1e293b !important;
}
html.light input::placeholder,
html.light textarea::placeholder {
  color: #94a3b8 !important;
}
html.light input:focus,
html.light textarea:focus,
html.light select:focus {
  border-color: rgba(124, 58, 237, 0.4) !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1) !important;
}
html.light select option {
  background-color: #f1f5f9 !important;
  color: #1e293b !important;
}

/* --- Shimmer: Adjust for light bg --- */
html.light .animate-shimmer {
  background: linear-gradient(90deg, transparent 0%, rgba(124, 58, 237, 0.08) 50%, transparent 100%) !important;
  background-size: 200% 100% !important;
}

/* --- Nav blur adjustment --- */
html.light .nav-blur {
  backdrop-filter: blur(20px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.5) !important;
}

/* --- Reveal: works same in both --- */
html.light .reveal {
  opacity: 0;
  transform: translateY(30px);
}
html.light .reveal.active {
  opacity: 1;
  transform: translateY(0);
}