/*
Default theme = DARK (the original site look).

We only apply overrides in LIGHT mode (html:not(.dark)) so dark mode stays 1:1.
*/

html:not(.dark) {
    --page: 248 250 252;
    --surface: 255 255 255;
    --card: 241 245 249;

    --fg: 15 23 42;
    --muted: 71 85 105;
    --muted2: 100 116 139;

    --line: 15 23 42;
    --overlay: 15 23 42;
}

/* Theme-aware overrides for the most common Tailwind utility classes used across the site (LIGHT MODE ONLY) */
html:not(.dark) body {
    background-color: rgb(var(--page));
    color: rgb(var(--fg));
}

html:not(.dark) .bg-page {
    background-color: rgb(var(--page)) !important;
}

html:not(.dark) .bg-surface {
    background-color: rgb(var(--surface)) !important;
}

html:not(.dark) .bg-card {
    background-color: rgb(var(--card)) !important;
}

html:not(.dark) .bg-black,
html:not(.dark) .bg-\[\#0B0F19\],
html:not(.dark) .bg-\[\#030712\],
html:not(.dark) .bg-\[\#050505\] {
    background-color: rgb(var(--surface)) !important;
}

html:not(.dark) .bg-black\/40 {
    background-color: rgb(var(--surface) / 0.55) !important;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

html:not(.dark) .bg-black\/50 {
    background-color: rgb(var(--surface) / 0.65) !important;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

html:not(.dark) .bg-black\/60 {
    background-color: rgb(var(--surface) / 0.75) !important;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

html:not(.dark) .bg-black\/70 {
    background-color: rgb(var(--surface) / 0.82) !important;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

html:not(.dark) .bg-black\/80 {
    background-color: rgb(var(--surface) / 0.88) !important;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

html:not(.dark) .bg-black\/90 {
    background-color: rgb(var(--surface) / 0.95) !important;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

/* Flip “white overlays” to be theme-aware so cards/panels still show up in light mode */
html:not(.dark) .bg-white\/5 {
    background-color: rgb(var(--overlay) / 0.04) !important;
}

html:not(.dark) .bg-white\/10 {
    background-color: rgb(var(--overlay) / 0.08) !important;
}

/* Hover/group-hover variants that are common across the site */
html:not(.dark) .hover\:text-white:hover {
    color: rgb(var(--fg)) !important;
}

html:not(.dark) .group:hover .group-hover\:text-white {
    color: rgb(var(--fg)) !important;
}

html:not(.dark) .hover\:bg-white\/5:hover {
    background-color: rgb(var(--overlay) / 0.04) !important;
}

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

html:not(.dark) .group:hover .group-hover\:bg-white\/5 {
    background-color: rgb(var(--overlay) / 0.04) !important;
}

html:not(.dark) .group:hover .group-hover\:bg-white\/10 {
    background-color: rgb(var(--overlay) / 0.08) !important;
}

html:not(.dark) .hover\:border-white\/10:hover {
    border-color: rgb(var(--line) / 0.12) !important;
}

html:not(.dark) .hover\:border-white\/20:hover {
    border-color: rgb(var(--line) / 0.18) !important;
}

html:not(.dark) .hover\:border-white\/30:hover {
    border-color: rgb(var(--line) / 0.25) !important;
}

html:not(.dark) .text-white {
    color: rgb(var(--fg)) !important;
}

html:not(.dark) .text-gray-50,
html:not(.dark) .text-gray-100,
html:not(.dark) .text-gray-200 {
    color: rgb(var(--fg)) !important;
}

html:not(.dark) .text-gray-300,
html:not(.dark) .text-gray-400 {
    color: rgb(var(--muted)) !important;
}

/* Body copy often uses text-gray-300 in dark mode; in light mode it should become normal readable text */
html:not(.dark) .text-gray-300 {
    color: rgb(var(--fg)) !important;
}

html:not(.dark) .text-gray-500,
html:not(.dark) .text-gray-600 {
    color: rgb(var(--muted)) !important;
}

html:not(.dark) .text-gray-700,
html:not(.dark) .text-gray-800,
html:not(.dark) .text-gray-900 {
    color: rgb(var(--fg)) !important;
}

/* Gray backgrounds used for placeholders/mockups */
html:not(.dark) .bg-gray-700 {
    background-color: rgb(var(--card)) !important;
}

html:not(.dark) .bg-gray-800 {
    background-color: rgb(var(--card)) !important;
}

html:not(.dark) .bg-gray-900 {
    background-color: rgb(var(--surface)) !important;
}

html:not(.dark) .bg-gray-700\/50 {
    background-color: rgb(var(--overlay) / 0.06) !important;
}

html:not(.dark) .bg-gray-600 {
    background-color: rgb(var(--overlay) / 0.18) !important;
}

/* White CTA buttons used on dark pages should stay high-contrast in light mode */
html:not(.dark) a.bg-white,
html:not(.dark) button.bg-white {
    background-color: rgb(var(--fg)) !important;
    color: rgb(255 255 255) !important;
}

html:not(.dark) a.bg-white:hover,
html:not(.dark) button.bg-white:hover {
    background-color: rgb(var(--fg) / 0.92) !important;
}

/* Gray borders */
html:not(.dark) .border-gray-600 {
    border-color: rgb(var(--line) / 0.25) !important;
}

html:not(.dark) .border-gray-700,
html:not(.dark) .border-gray-800 {
    border-color: rgb(var(--line) / 0.20) !important;
}

/* Inputs: make sure base fields look clean in light mode even if they're using dark-mode utilities */
html:not(.dark) input,
html:not(.dark) textarea,
html:not(.dark) select {
    color: rgb(var(--fg));
}

html:not(.dark) input::placeholder,
html:not(.dark) textarea::placeholder {
    color: rgb(var(--muted2));
}

html:not(.dark) .border-white\/5 {
    border-color: rgb(var(--line) / 0.08) !important;
}

html:not(.dark) .border-white\/10 {
    border-color: rgb(var(--line) / 0.12) !important;
}

html:not(.dark) .border-white\/20 {
    border-color: rgb(var(--line) / 0.18) !important;
}

html:not(.dark) .border-white\/30 {
    border-color: rgb(var(--line) / 0.25) !important;
}

/* Gradient stop overrides used heavily in hero/overlays (LIGHT MODE ONLY) */
html:not(.dark) .from-surface {
    --tw-gradient-from: rgb(var(--surface)) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--surface) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

/* Re-map “black” gradient stops to the light page background so overlays don't turn sections dark */
html:not(.dark) .from-black {
    --tw-gradient-from: rgb(var(--page)) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--page) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

html:not(.dark) .to-black {
    --tw-gradient-to: rgb(var(--page)) var(--tw-gradient-to-position);
}

html:not(.dark) .via-black {
    --tw-gradient-stops: var(--tw-gradient-from), rgb(var(--page)) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

html:not(.dark) .via-black\/50 {
    --tw-gradient-stops: var(--tw-gradient-from), rgb(var(--page) / 0.5) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

/* Theme toggle icons */
.theme-icon-sun,
.theme-icon-moon {
    display: none;
}

/* Mobile perf tweaks: reduce expensive blur/backdrop-filter work that can delay LCP on slower GPUs. */
@media (max-width: 768px) {
    #navbar {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    #cookie-consent-banner {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    .backdrop-blur-sm,
    .backdrop-blur-md,
    .backdrop-blur-lg,
    .backdrop-blur-xl {
        --tw-backdrop-blur: blur(0px) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    /* Reduce huge glow blurs on mobile to speed up paint/composite. */
    .blur-\[120px\] { --tw-blur: blur(60px) !important; }
    .blur-\[100px\] { --tw-blur: blur(50px) !important; }
    .blur-\[60px\] { --tw-blur: blur(30px) !important; }
}

/* Render optimization: skip layout/paint for offscreen sections until needed (Chromium-based browsers). */
.cv-auto {
    content-visibility: auto;
    contain-intrinsic-size: 800px;
}

html.dark .theme-icon-sun {
    display: block;
}

html:not(.dark) .theme-icon-moon {
    display: block;
}