/* ==========================================================================
   UNIVERSAL THEME ENGINE - HIGH CONTRAST LIGHT (DEFAULT) & MODERN DARK MODES
   ========================================================================== */

/* 1. DEFAULT LIGHT THEME VARIABLES */
:root,
html.light,
html:not(.dark) {
  --bg-main: #f8fafc;
  --bg-surface: #ffffff;
  --bg-surface-elevated: #ffffff;
  --bg-nav: rgba(255, 255, 255, 0.97);
  --text-primary: #090d16;      /* Pitch dark navy for crystal clarity */
  --text-secondary: #1e293b;    /* Rich dark slate for body paragraphs */
  --text-muted: #334155;        /* Dark legible slate for subtitles & meta */
  --text-subtle: #475569;       /* Secondary captions */
  --border-color: #cbd5e1;
  --border-subtle: #e2e8f0;
  --shadow-card: 0 4px 20px -2px rgba(0, 0, 0, 0.06), 0 2px 6px -1px rgba(0, 0, 0, 0.03);
  --shadow-hover: 0 20px 40px -10px rgba(0, 0, 0, 0.12);
  --toggle-bg: #f1f5f9;
  --toggle-border: #94a3b8;
  --toggle-color: #0f172a;
  color-scheme: light;
}

/* 2. DARK THEME VARIABLES */
html.dark,
html.theme-dark {
  --bg-main: #080d1a;
  --bg-surface: #0f172a;
  --bg-surface-elevated: #1e293b;
  --bg-nav: rgba(8, 13, 26, 0.95);
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --text-subtle: #64748b;
  --border-color: rgba(255, 255, 255, 0.12);
  --border-subtle: rgba(255, 255, 255, 0.06);
  --shadow-card: 0 4px 20px -2px rgba(0, 0, 0, 0.4);
  --shadow-hover: 0 20px 40px -10px rgba(0, 0, 0, 0.6);
  --toggle-bg: #1e293b;
  --toggle-border: #334155;
  --toggle-color: #f8fafc;
  color-scheme: dark;
}

/* Universal Theme Toggle Button */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background-color: var(--toggle-bg);
  border: 1.5px solid var(--toggle-border);
  color: var(--toggle-color);
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
  z-index: 100;
}

.theme-toggle-btn:hover {
  transform: translateY(-2px);
  border-color: #0284c7;
  box-shadow: 0 6px 16px rgba(2, 132, 199, 0.25);
}

.theme-toggle-btn i {
  font-size: 16px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.theme-toggle-btn:hover i {
  transform: rotate(20deg) scale(1.15);
}

/* ==========================================================================
   LIGHT MODE OVERRIDES (DEEP, PITCH-BLACK & DARK SLATE CONTRAST)
   ========================================================================== */
html.light,
html:not(.dark) {
  background-color: #f8fafc !important;
  color: #090d16 !important;
}

html.light body,
html:not(.dark) body,
html.light .site-shell,
html:not(.dark) .site-shell {
  background: #f8fafc !important;
  background-color: #f8fafc !important;
  color: #090d16 !important;
}

/* Navbar in Light Mode */
html.light nav,
html:not(.dark) nav,
html.light #navbar,
html:not(.dark) #navbar,
html.light .nav-scrolled,
html:not(.dark) .nav-scrolled {
  background-color: rgba(255, 255, 255, 0.96) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

html.light nav a,
html.light nav .nav-link,
html.light #navbar a,
html:not(.dark) nav a,
html:not(.dark) nav .nav-link,
html:not(.dark) #navbar a {
  color: #090d16 !important;
  font-weight: 700;
}

html.light nav a:hover,
html:not(.dark) nav a:hover {
  color: #0284c7 !important;
}

/* All Headings & Titles in Light Mode */
html.light h1, html.light h2, html.light h3, html.light h4, html.light h5, html.light h6,
html.light .text-slate-950, html.light .text-slate-900, html.light .text-gray-900,
html:not(.dark) h1, html:not(.dark) h2, html:not(.dark) h3, html:not(.dark) h4, html:not(.dark) h5, html:not(.dark) h6,
html:not(.dark) .text-slate-950, html:not(.dark) .text-slate-900, html:not(.dark) .text-gray-900 {
  color: #090d16 !important;
  font-weight: 800;
}

/* All Paragraphs, Lists & Body Text in Light Mode */
html.light p, html.light li, html.light td, html.light th,
html.light .text-slate-600, html.light .text-slate-700, html.light .text-gray-700,
html:not(.dark) p, html:not(.dark) li, html:not(.dark) td, html:not(.dark) th,
html:not(.dark) .text-slate-600, html:not(.dark) .text-slate-700, html:not(.dark) .text-gray-700 {
  color: #1e293b !important;
}

/* Subtitles, meta tags, and captions in Light Mode */
html.light .text-slate-400, html.light .text-slate-500, html.light .text-gray-500,
html.light .text-muted, html.light .metric-label,
html:not(.dark) .text-slate-400, html:not(.dark) .text-slate-500, html:not(.dark) .text-gray-500,
html:not(.dark) .text-muted, html:not(.dark) .metric-label {
  color: #334155 !important;
}

/* Cards & Surface Containers in Light Mode */
html.light .info-card,
html.light .stat-card,
html.light .glass-card,
html.light .glass-panel,
html.light .card,
html.light article,
html:not(.dark) .info-card,
html:not(.dark) .stat-card,
html:not(.dark) .glass-card,
html:not(.dark) .glass-panel,
html:not(.dark) .card,
html:not(.dark) article {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.06) !important;
}

html.light .info-card h1, html.light .info-card h2, html.light .info-card h3, html.light .info-card h4,
html.light .glass-card h1, html.light .glass-card h2, html.light .glass-card h3, html.light .glass-card h4,
html.light .stat-card h1, html.light .stat-card h2, html.light .stat-card h3, html.light .stat-card h4,
html:not(.dark) .info-card h1, html:not(.dark) .info-card h2, html:not(.dark) .info-card h3, html:not(.dark) .info-card h4,
html:not(.dark) .glass-card h1, html:not(.dark) .glass-card h2, html:not(.dark) .glass-card h3, html:not(.dark) .glass-card h4,
html:not(.dark) .stat-card h1, html:not(.dark) .stat-card h2, html:not(.dark) .stat-card h3, html:not(.dark) .stat-card h4 {
  color: #090d16 !important;
  font-weight: 800 !important;
}

html.light .info-card p, html.light .glass-card p, html.light .stat-card p,
html:not(.dark) .info-card p, html:not(.dark) .glass-card p, html:not(.dark) .stat-card p {
  color: #1e293b !important;
}

/* FAQ Accordion Elements in Light Mode */
html.light .faq-btn,
html.light .faq-btn span,
html.light .faq-toggle,
html.light .faq-question,
html.light .faq-question h3,
html.light .faq-title,
html.light .accordion-button,
html:not(.dark) .faq-btn,
html:not(.dark) .faq-btn span,
html:not(.dark) .faq-toggle,
html:not(.dark) .faq-question,
html:not(.dark) .faq-question h3,
html:not(.dark) .faq-title,
html:not(.dark) .accordion-button {
  color: #090d16 !important;
  font-weight: 700 !important;
}

html.light .faq-content,
html.light .faq-answer,
html.light .faq-answer p,
html.light .accordion-body,
html:not(.dark) .faq-content,
html:not(.dark) .faq-answer,
html:not(.dark) .faq-answer p,
html:not(.dark) .accordion-body {
  color: #1e293b !important;
}

/* Form Inputs in Light Mode */
html.light label,
html:not(.dark) label {
  color: #090d16 !important;
  font-weight: 600 !important;
}

html.light input:not([type="submit"]):not([type="button"]),
html.light select,
html.light textarea,
html:not(.dark) input:not([type="submit"]):not([type="button"]),
html:not(.dark) select,
html:not(.dark) textarea {
  background-color: #ffffff !important;
  color: #090d16 !important;
  border: 1px solid #cbd5e1 !important;
}

/* Primary Action Buttons (Always White Text on Vibrant Gradients) */
html.light button.btn-primary,
html.light a.btn-primary,
html.light .btn-brand,
html.light .btn-hero-start,
html.light button[type="submit"]:not(.bg-white),
html.light .bg-gradient-to-r,
html.light .bg-blue-600,
html.light .bg-brand-600,
html:not(.dark) button.btn-primary,
html:not(.dark) a.btn-primary,
html:not(.dark) .btn-brand,
html:not(.dark) .btn-hero-start,
html:not(.dark) button[type="submit"]:not(.bg-white),
html:not(.dark) .bg-gradient-to-r,
html:not(.dark) .bg-blue-600,
html:not(.dark) .bg-brand-600 {
  color: #ffffff !important;
}

html.light button.btn-primary *,
html.light a.btn-primary *,
html.light .btn-brand *,
html.light .btn-hero-start *,
html:not(.dark) button.btn-primary *,
html:not(.dark) a.btn-primary *,
html:not(.dark) .btn-brand * {
  color: #ffffff !important;
}

/* Explicit dark callout boxes and mock consoles */
html.light .bg-gradient-to-br.from-slate-900,
html:not(.dark) .bg-gradient-to-br.from-slate-900,
.dark-console,
#heroMockConsole {
  background: #050811 !important;
  color: #ffffff !important;
}

html.light .bg-gradient-to-br.from-slate-900 h1,
html.light .bg-gradient-to-br.from-slate-900 h2,
html.light .bg-gradient-to-br.from-slate-900 h3,
html.light .bg-gradient-to-br.from-slate-900 div,
html.light .bg-gradient-to-br.from-slate-900 span,
html:not(.dark) .bg-gradient-to-br.from-slate-900 h1,
html:not(.dark) .bg-gradient-to-br.from-slate-900 h2,
html:not(.dark) .bg-gradient-to-br.from-slate-900 h3,
html:not(.dark) .bg-gradient-to-br.from-slate-900 div,
html:not(.dark) .bg-gradient-to-br.from-slate-900 span,
.dark-console h1, .dark-console h2, .dark-console h3, .dark-console h4, .dark-console .text-white, .dark-console .font-display,
#heroMockConsole h1, #heroMockConsole h2, #heroMockConsole h3, #heroMockConsole h4, #heroMockConsole .text-white, #heroMockConsole .font-display {
  color: #ffffff !important;
}

.dark-console .text-slate-400, #heroMockConsole .text-slate-400 {
  color: #94a3b8 !important;
}

.dark-console .text-slate-300, #heroMockConsole .text-slate-300 {
  color: #cbd5e1 !important;
}

.dark-console .bg-slate-900, #heroMockConsole .bg-slate-900 {
  background-color: #0b132b !important;
}


/* ==========================================================================
   DARK MODE OVERRIDES
   ========================================================================== */
html.dark,
html.dark body,
html.dark .site-shell {
  background: #080d1a !important;
  background-color: #080d1a !important;
  color: #f8fafc !important;
}

html.dark nav,
html.dark #navbar,
html.dark .nav-scrolled {
  background: rgba(8, 13, 26, 0.95) !important;
  background-color: rgba(8, 13, 26, 0.95) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

html.dark nav a,
html.dark nav .nav-link,
html.dark #navbar a {
  color: #f8fafc !important;
}

html.dark nav a:hover {
  color: #38bdf8 !important;
}

html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6,
html.dark .text-slate-950, html.dark .text-slate-900 {
  color: #f8fafc !important;
}

html.dark p, html.dark li, html.dark td, html.dark th,
html.dark .text-slate-600, html.dark .text-slate-700 {
  color: #cbd5e1 !important;
}

html.dark .text-slate-400, html.dark .text-slate-500, html.dark .text-muted {
  color: #94a3b8 !important;
}

html.dark .info-card,
html.dark .stat-card,
html.dark .glass-card,
html.dark .glass-panel,
html.dark .card,
html.dark article {
  background-color: #0f172a !important;
  background: #0f172a !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

html.dark .info-card h1, html.dark .info-card h2, html.dark .info-card h3,
html.dark .glass-card h1, html.dark .glass-card h2, html.dark .glass-card h3 {
  color: #f8fafc !important;
}

html.dark .info-card p, html.dark .glass-card p, html.dark .stat-card p {
  color: #cbd5e1 !important;
}

html.dark .faq-btn,
html.dark .faq-btn span,
html.dark .faq-question,
html.dark .faq-question h3,
html.dark .faq-title {
  color: #f8fafc !important;
}

html.dark .faq-content,
html.dark .faq-answer,
html.dark .faq-answer p {
  color: #cbd5e1 !important;
}

html.dark label {
  color: #cbd5e1 !important;
}

html.dark input:not([type="submit"]):not([type="button"]),
html.dark select,
html.dark textarea {
  background-color: #1e293b !important;
  color: #f8fafc !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

html.dark footer {
  background-color: #050811 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Smooth Transitions across theme switch */
body, nav, header, section, footer, article, div, a, button, input {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* ==========================================================================
   MODERN UX & USER-FRIENDLY UTILITIES
   ========================================================================== */

/* Top Reading Scroll Progress Bar */
.scroll-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3.5px;
  width: 0%;
  background: linear-gradient(90deg, #0284c7, #38bdf8, #6366f1);
  z-index: 99999;
  transition: width 0.08s ease-out;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.6);
  pointer-events: none;
}

/* Floating Back-To-Top Button */
.back-to-top-btn {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0284c7, #2563eb) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 10px 25px -5px rgba(2, 132, 199, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(0.9);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 9990;
}

.back-to-top-btn i {
  color: #ffffff !important;
}

.back-to-top-btn.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.back-to-top-btn:hover {
  transform: translateY(-4px) scale(1.06);
  box-shadow: 0 15px 30px -5px rgba(2, 132, 199, 0.6);
  background: linear-gradient(135deg, #0369a1, #1d4ed8) !important;
}

/* Modern Sleek Scrollbars */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
html.dark ::-webkit-scrollbar-thumb {
  background: #334155;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Accessible Focus Ring */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #0284c7 !important;
  outline-offset: 2px !important;
}

/* ==========================================================================
   THREE.JS 3D SCENE & 3D ROLLING SCROLL REVEALS
   ========================================================================== */

#three-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
}

html.light #three-canvas {
  opacity: 0.65;
}

/* 3D Cinematic Rolling Out Reveals */
.reveal-3d {
  opacity: 0;
  transform: translateY(30px) scale(0.98);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-3d.in-view,
.reveal-3d:focus-within {
  opacity: 1 !important;
  transform: none !important;
}

/* Staggered Child Elements */
.stagger-card {
  opacity: 0;
  transform: translateY(20px) scale(0.97);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.stagger-card.in-view,
.stagger-card:focus-within {
  opacity: 1 !important;
  transform: none !important;
}

/* Interactive 3D Card Tilt */
.tilt-card {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}

.tilt-card:focus-within,
.glass-card:focus-within {
  transform: none !important;
}

/* ==========================================================================
   WEBKIT AUTOFILL CONTRAST & STABILITY (PREVENTS BLANKING)
   ========================================================================== */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color: #090d16 !important;
  color: #090d16 !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

html.dark input:-webkit-autofill,
html.dark input:-webkit-autofill:hover, 
html.dark input:-webkit-autofill:focus, 
html.dark input:-webkit-autofill:active,
html.dark textarea:-webkit-autofill,
html.dark select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #1e293b inset !important;
  -webkit-text-fill-color: #f8fafc !important;
  color: #f8fafc !important;
  transition: background-color 5000s ease-in-out 0s !important;
}