/********************************
 * Dark Theme — Glassmorphism Overrides
 ********************************/
:root[data-theme="dark"] {
    /* ─── Deep Navy Dark Background ─── */
    --bg: #080d1c;
    --bg-secondary: #0d1333;

    /* ─── Dark Surface Layers ─── */
    --surface: #111827;
    --surface-hover: #1a2238;
    --surface-active: #1e2a4a;
    --surface-glass: rgba(13, 19, 51, 0.72);
    --surface-glass-hover: rgba(13, 19, 51, 0.90);

    /* ─── Glassmorphism Tokens (Dark Mode) ─── */
    --glass-bg: rgba(255, 255, 255, 0.04);
    --glass-bg-hover: rgba(255, 255, 255, 0.08);
    --glass-border: rgba(255, 255, 255, 0.10);
    --glass-border-glow: rgba(99, 102, 241, 0.50);
    --glass-blur: 18px;
    --glass-saturation: saturate(200%);

    /* ─── Glow Tokens (Dark Mode — vivid) ─── */
    --glow-primary: 0 0 30px rgba(99, 102, 241, 0.45);
    --glow-secondary: 0 0 40px rgba(168, 85, 247, 0.35);
    --glow-card: 0 8px 40px rgba(99, 102, 241, 0.20);
    --glow-btn: 0 4px 24px rgba(99, 102, 241, 0.55);
    --glow-icon: 0 0 24px rgba(168, 85, 247, 0.60);
    --glow-text: 0 0 16px rgba(99, 102, 241, 0.40);

    /* ─── Ambient Background Blobs (Dark) ─── */
    --blob-primary: rgba(99, 102, 241, 0.18);
    --blob-secondary: rgba(168, 85, 247, 0.14);

    /* ─── Text ─── */
    --text-primary: #f0f4ff;
    --text-secondary: #a8b4d0;
    --text-tertiary: #64748b;
    --text-accent: #818cf8;

    /* ─── UI Frame Tokens (Dark Mode) ─── */
    --ui-frame-bg:        linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    --ui-frame-border:    rgba(255, 255, 255, 0.15);
    --ui-frame-header:    rgba(0, 0, 0, 0.2);
    --ui-frame-sidebar:   rgba(0, 0, 0, 0.1);
    --ui-frame-text:      #ffffff;
    --ui-frame-text-dim:  rgba(255, 255, 255, 0.6);
    --ui-frame-line:      rgba(255, 255, 255, 0.1);
    --ui-frame-shadow:    0 40px 80px rgba(0, 0, 0, 0.5);
    --ui-frame-inner-bg:  transparent;
    --ui-frame-accent:    var(--accent-300);
    --ui-frame-glow:      0 0 15px rgba(34, 211, 238, 0.6);

    /* ─── Border & Shadow ─── */
    --border: rgba(255, 255, 255, 0.08);
    --border-hover: rgba(255, 255, 255, 0.16);
    --border-focus: rgba(99, 102, 241, 0.60);

    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.40);
    --shadow-sm: 0 2px 4px 0 rgba(0, 0, 0, 0.50), 0 1px 2px 0 rgba(0, 0, 0, 0.40);
    --shadow-md: 0 4px 12px -1px rgba(0, 0, 0, 0.55), 0 2px 6px -1px rgba(0, 0, 0, 0.40);
    --shadow-lg: 0 12px 24px -3px rgba(0, 0, 0, 0.55), 0 6px 10px -2px rgba(0, 0, 0, 0.40);
    --shadow-xl: 0 20px 40px -5px rgba(0, 0, 0, 0.60), 0 10px 16px -5px rgba(0, 0, 0, 0.45);
    --shadow-2xl: 0 28px 60px -12px rgba(0, 0, 0, 0.75);
    --shadow-glow: 0 0 24px rgba(99, 102, 241, 0.35);
    --shadow-glow-lg: 0 0 48px rgba(99, 102, 241, 0.45);
    --shadow-glass: 0 8px 40px rgba(0, 0, 0, 0.50), inset 0 1px 0 rgba(255, 255, 255, 0.08);

    /* ─── Gradients (Dark Mode) ─── */
    --gradient-hero: linear-gradient(135deg, #080d1c 0%, #0d1333 50%, #10123a 100%);
    --gradient-card: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
    --gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
    --gradient-bg: linear-gradient(135deg, #080d1c, #0d1333);
    --gradient-badge: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(168, 85, 247, 0.20));
    --gradient-glow: radial-gradient(ellipse at center, rgba(99, 102, 241, 0.35) 0%, transparent 70%);
    --gradient-stat: linear-gradient(135deg, var(--primary-400), var(--secondary-400));
}

/* ─── Smooth theme transition ─── */
*,
*::before,
*::after {
    transition:
        background-color 0.35s ease,
        border-color 0.35s ease,
        color 0.35s ease,
        box-shadow 0.35s ease,
        opacity 0.20s ease;
}

/* ─── Exclude transitions on scroll/animation elements ─── */
canvas,
video,
svg,
img,
[data-no-transition] {
    transition: none !important;
}

/* ═══════════════════════════════════════
   DARK MODE — COMPONENT OVERRIDES
   ═══════════════════════════════════════ */

/* Header */
:root[data-theme="dark"] header.site-header {
    background: rgba(8, 13, 28, 0.70);
    border-bottom: 1px solid rgba(99, 102, 241, 0.15);
    box-shadow: 0 1px 0 rgba(99, 102, 241, 0.08), 0 4px 24px rgba(0, 0, 0, 0.30);
}

:root[data-theme="dark"] header.site-header.scrolled {
    background: rgba(8, 13, 28, 0.92);
    border-bottom-color: rgba(99, 102, 241, 0.25);
    box-shadow: 0 1px 0 rgba(99, 102, 241, 0.15), 0 8px 32px rgba(0, 0, 0, 0.40);
}

/* Brand logo text glow */
:root[data-theme="dark"] .brand:hover .logo-text {
    text-shadow: var(--glow-text);
}

/* Nav link hover */
:root[data-theme="dark"] .primary-nav a:hover {
    color: var(--primary-300);
}

:root[data-theme="dark"] .primary-nav a::after {
    background: linear-gradient(90deg, var(--primary-400), var(--secondary-400));
    box-shadow: 0 0 8px rgba(99, 102, 241, 0.60);
}

/* Mobile menu */
:root[data-theme="dark"] #mobileMenu {
    background: rgba(8, 13, 28, 0.95);
    border-bottom-color: rgba(99, 102, 241, 0.15);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
}

/* Tool Cards — glassmorphic */
:root[data-theme="dark"] .tool-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-glass);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
}

:root[data-theme="dark"] .tool-card:hover {
    background: var(--glass-bg-hover);
    border-color: rgba(99, 102, 241, 0.40);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.50), 0 0 0 1px rgba(99, 102, 241, 0.30), var(--glow-card);
    transform: translateY(-8px) scale(1.01);
}

:root[data-theme="dark"] .tool-card::before {
    background: linear-gradient(90deg, var(--primary-500), var(--secondary-500));
    box-shadow: 0 0 12px rgba(99, 102, 241, 0.60);
}

/* Category pills */
:root[data-theme="dark"] .category-pill {
    background: var(--glass-bg);
    border-color: var(--glass-border);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

:root[data-theme="dark"] .category-pill.active {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.35), rgba(168, 85, 247, 0.25));
    border-color: rgba(99, 102, 241, 0.50);
    box-shadow: 0 0 16px rgba(99, 102, 241, 0.30);
    color: var(--primary-300);
}

/* Stat cards */
:root[data-theme="dark"] .stat-card {
    background: var(--glass-bg);
    border-color: var(--glass-border);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    box-shadow: var(--shadow-glass);
}

:root[data-theme="dark"] .stat-card:hover {
    border-color: rgba(99, 102, 241, 0.40);
    box-shadow: var(--glow-card), 0 20px 40px rgba(0, 0, 0, 0.40);
}

:root[data-theme="dark"] .stat-number {
    background: var(--gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    filter: drop-shadow(0 0 12px rgba(99, 102, 241, 0.50));
}

/* Buttons */
:root[data-theme="dark"] .btn.primary {
    box-shadow: var(--glow-btn), var(--shadow-md);
}

:root[data-theme="dark"] .btn.primary:hover {
    box-shadow: 0 6px 28px rgba(99, 102, 241, 0.65), var(--shadow-lg);
}

:root[data-theme="dark"] .btn.secondary {
    background: var(--glass-bg);
    border-color: var(--glass-border);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

:root[data-theme="dark"] .btn.secondary:hover {
    background: var(--glass-bg-hover);
    border-color: rgba(99, 102, 241, 0.40);
    box-shadow: var(--glow-card);
}

:root[data-theme="dark"] .btn.ghost:hover {
    background: rgba(99, 102, 241, 0.12);
    color: var(--primary-300);
}

/* Icon button */
:root[data-theme="dark"] .icon-btn:hover {
    background: rgba(99, 102, 241, 0.12);
    color: var(--primary-300);
}

/* Calculator button */
:root[data-theme="dark"] .calc-button {
    background: linear-gradient(135deg, var(--primary-500), var(--secondary-500));
    box-shadow: var(--glow-btn);
}

/* Forms */
:root[data-theme="dark"] .form-input,
:root[data-theme="dark"] .form-select,
:root[data-theme="dark"] .form-textarea {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--glass-border);
    color: var(--text-primary);
}

:root[data-theme="dark"] .form-input:focus,
:root[data-theme="dark"] .form-select:focus,
:root[data-theme="dark"] .form-textarea:focus {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(99, 102, 241, 0.60);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.20);
}

/* Featured tools */
:root[data-theme="dark"] .featured-tool {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.04), rgba(99, 102, 241, 0.08));
    border-color: rgba(99, 102, 241, 0.20);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
}

:root[data-theme="dark"] .featured-tool:hover {
    border-color: rgba(99, 102, 241, 0.50);
    box-shadow: 0 20px 50px rgba(99, 102, 241, 0.20), 0 0 0 1px rgba(99, 102, 241, 0.30);
}

/* Footer */
:root[data-theme="dark"] .site-footer {
    background: rgba(8, 13, 28, 0.95);
    border-top-color: rgba(99, 102, 241, 0.12);
}

/* Modal */
:root[data-theme="dark"] .modal {
    background: rgba(13, 19, 51, 0.92);
    border: 1px solid rgba(99, 102, 241, 0.25);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.60), 0 0 0 1px rgba(99, 102, 241, 0.20);
}

:root[data-theme="dark"] .modal-overlay {
    background: rgba(2, 4, 14, 0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Tables */
:root[data-theme="dark"] table {
    border-color: var(--border);
}

/* :root[data-theme="dark"] th {
    background: rgba(255, 255, 255, 0.04);
} */

:root[data-theme="dark"] td {
    border-color: var(--border);
}

/* Code blocks */
:root[data-theme="dark"] code,
:root[data-theme="dark"] pre {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--border);
}

/* Info/Finance boxes */
:root[data-theme="dark"] .alert-box,
:root[data-theme="dark"] .finance-disclaimer {
    background: rgba(99, 102, 241, 0.06) !important;
    border-color: rgba(99, 102, 241, 0.20) !important;
    color: var(--text-secondary) !important;
}

/* Glass card generic */
:root[data-theme="dark"] .glass-card,
:root[data-theme="dark"] .document-card {
    background: var(--glass-bg) !important;
    border-color: var(--glass-border) !important;
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
}

/* Plus icon */
:root[data-theme="dark"] .plus-icon::before,
:root[data-theme="dark"] .plus-icon::after {
    background: var(--primary-400) !important;
}

/* Scrollbar */
:root[data-theme="dark"] ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

:root[data-theme="dark"] ::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
}

:root[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.30);
    border-radius: var(--radius-full);
}

:root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(99, 102, 241, 0.55);
}

/* Selection */
:root[data-theme="dark"] ::selection {
    background-color: rgba(99, 102, 241, 0.35);
    color: white;
}

/* ═══════════════════════════════════════
   HERO SECTION — LIGHT MODE
   ═══════════════════════════════════════ */
.hero-section {
    padding-top: calc(var(--header-height) + var(--space-12)) !important;
    padding-bottom: var(--space-12) !important;
}

.floating-img {
    border-radius: var(--radius-2xl) !important;
    box-shadow: var(--shadow-2xl) !important;
    overflow: hidden !important;
}

/* ═══════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}