/* ===================================================================
   EVORIX THEME SYSTEM
   One professional light/dark mode layer.
   Keep this loaded AFTER site.css and site-overrides.css.
   =================================================================== */

/* -----------------------------
   Base dark theme
   ----------------------------- */

:root,
html[data-theme="dark"] {
    color-scheme: dark;
    --background: 0 0% 0%;
    --foreground: 0 0% 100%;
    --card: 0 0% 6.7%;
    --card-foreground: 0 0% 100%;
    --popover: 0 0% 6.7%;
    --popover-foreground: 0 0% 100%;
    --primary: 0 0% 100%;
    --primary-foreground: 0 0% 0%;
    --secondary: 0 0% 3.5%;
    --secondary-foreground: 0 0% 100%;
    --muted: 0 0% 6.7%;
    --muted-foreground: 0 0% 63%;
    --accent: 0 0% 6.7%;
    --accent-foreground: 0 0% 100%;
    --border: 0 0% 13.3%;
    --input: 0 0% 13.3%;
    --ring: 0 0% 100%;
    --surface-elevated: 0 0% 8%;
    --glow-white: 0 0% 100%;
    --theme-bg-soft: rgba(255, 255, 255, 0.035);
    --theme-bg-softer: rgba(255, 255, 255, 0.018);
    --theme-border-soft: rgba(255, 255, 255, 0.1);
    --theme-border-strong: rgba(255, 255, 255, 0.18);
    --theme-shadow-soft: rgba(255, 255, 255, 0.12);
    --theme-shadow-dark: rgba(0, 0, 0, 0.92);
    --theme-topbar-bg: #000000;
    --theme-topbar-shadow: none;
    --theme-grid-line: hsla(0, 0%, 100%, 0.04);
    --theme-hero-start: rgba(7, 11, 20, 0.98);
    --theme-hero-end: rgba(10, 14, 26, 0.9);
}

/* -----------------------------
   Light theme
   ----------------------------- */

html[data-theme="light"] {
    color-scheme: light;
    --background: 0 0% 99%;
    --foreground: 0 0% 7%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 7%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 7%;
    --primary: 0 0% 7%;
    --primary-foreground: 0 0% 100%;
    --secondary: 0 0% 96.5%;
    --secondary-foreground: 0 0% 7%;
    --muted: 0 0% 93.5%;
    --muted-foreground: 0 0% 35%;
    --accent: 0 0% 93.5%;
    --accent-foreground: 0 0% 7%;
    --border: 0 0% 85%;
    --input: 0 0% 85%;
    --ring: 0 0% 7%;
    --surface-elevated: 0 0% 100%;
    --glow-white: 0 0% 7%;
    --theme-bg-soft: rgba(0, 0, 0, 0.035);
    --theme-bg-softer: rgba(0, 0, 0, 0.018);
    --theme-border-soft: rgba(0, 0, 0, 0.11);
    --theme-border-strong: rgba(0, 0, 0, 0.18);
    --theme-shadow-soft: rgba(0, 0, 0, 0.14);
    --theme-shadow-dark: rgba(0, 0, 0, 0.16);
    --theme-topbar-bg: #ffffff;
    --theme-topbar-shadow: none;
    --theme-grid-line: hsla(0, 0%, 0%, 0.055);
    --theme-hero-start: rgba(255, 255, 255, 0.98);
    --theme-hero-end: rgba(247, 247, 247, 0.94);
}

/* -----------------------------
   Global polish
   ----------------------------- */

html {
    background: hsl(var(--background));
}

body {
    background: radial-gradient(circle at 50% -10%, var(--theme-bg-soft), transparent 34%), hsl(var(--background));
    color: hsl(var(--foreground));
}

html.theme-changing *,
html.theme-changing *::before,
html.theme-changing *::after {
    transition: background-color 0.24s ease, border-color 0.24s ease, color 0.24s ease, box-shadow 0.24s ease, opacity 0.24s ease, filter 0.24s ease !important;
}

/* -----------------------------
   Navbar theme fixes
   ----------------------------- */

.topbar {
    background: var(--theme-topbar-bg) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: var(--theme-topbar-shadow);
}

.mobile-menu {
    background: var(--theme-topbar-bg) !important;
}

.topbar__brand-logo {
    position: relative;
    display: block;
    width: 8.55rem;
    height: 1.55rem;
}

.topbar__brand-icon {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity 0.22s ease, filter 0.22s ease;
}

.topbar__brand-icon--light {
    opacity: 0;
}

html[data-theme="light"] .topbar__brand-icon--dark {
    opacity: 0;
}

html[data-theme="light"] .topbar__brand-icon--light {
    opacity: 1;
}

html[data-theme="dark"] .topbar__brand-icon--dark {
    opacity: 1;
}

html[data-theme="dark"] .topbar__brand-icon--light {
    opacity: 0;
}

.topbar__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.theme-toggle {
    position: relative;
    display: inline-flex;
    height: 2.25rem;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 1px solid hsl(var(--border));
    border-radius: 999px;
    background: linear-gradient(180deg, var(--theme-bg-soft), var(--theme-bg-softer)), hsl(var(--card));
    color: hsl(var(--foreground));
    padding: 0 0.85rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    box-shadow: inset 0 1px 0 var(--theme-bg-soft), 0 14px 28px -24px var(--theme-shadow-soft);
}

    .theme-toggle:hover {
        border-color: hsl(var(--foreground) / 0.28);
        background: linear-gradient(180deg, var(--theme-bg-soft), var(--theme-bg-softer)), hsl(var(--background));
    }

.theme-toggle__icon {
    display: none;
    width: 1rem;
    height: 1rem;
    align-items: center;
    justify-content: center;
}

    .theme-toggle__icon svg {
        width: 1rem;
        height: 1rem;
        stroke-width: 1.7;
    }

html[data-theme="dark"] .theme-toggle__icon--sun {
    display: inline-flex;
}

html[data-theme="light"] .theme-toggle__icon--moon {
    display: inline-flex;
}

.theme-toggle--wide {
    width: 100%;
    height: 2.75rem;
    justify-content: center;
    border-radius: 0.75rem;
}

/* -----------------------------
   Shared sections/components
   ----------------------------- */

.glow-border {
    box-shadow: 0 0 0 1px hsl(var(--foreground) / 0.045), 0 0 20px -8px hsl(var(--foreground) / 0.12);
}

.card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

    .card-hover:hover {
        transform: translateY(-4px);
        box-shadow: 0 0 0 1px hsl(var(--foreground) / 0.08), 0 16px 34px -26px var(--theme-shadow-soft);
    }

.glow-pulse {
    animation-name: glowPulseTheme;
}

@keyframes glowPulseTheme {
    0%, 100% {
        box-shadow: 0 0 20px -8px hsl(var(--foreground) / 0.14);
    }

    50% {
        box-shadow: 0 0 40px -12px hsl(var(--foreground) / 0.24);
    }
}

.site-footer {
    background: hsl(var(--secondary));
    border-top-color: hsl(var(--border)) !important;
    box-shadow: inset 0 1px 0 hsl(var(--foreground) / 0.05);
}

.site-footer--inverse {
    background: hsl(var(--background));
}

/* Black media sections stay black in light mode; their text must stay white. */
html[data-theme="light"] .scroll-expand-hero,
html[data-theme="light"] .footer-panel {
    color: #ffffff;
}

html[data-theme="light"] .scroll-expand-hero .text-foreground,
html[data-theme="light"] .scroll-expand-hero .headline-accent,
html[data-theme="light"] .scroll-expand-hero .scroll-expand-hero__title,
html[data-theme="light"] .footer-panel .text-foreground {
    color: #ffffff !important;
}

html[data-theme="light"] .scroll-expand-hero .text-muted-foreground,
html[data-theme="light"] .scroll-expand-hero .scroll-expand-hero__subtitle,
html[data-theme="light"] .footer-panel .text-muted-foreground {
    color: rgba(255, 255, 255, 0.72) !important;
}

html[data-theme="light"] .scroll-expand-hero .border-border {
    border-color: rgba(255, 255, 255, 0.22) !important;
}

html[data-theme="light"] .scroll-expand-hero .bg-card {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="light"] .scroll-expand-hero .bg-foreground {
    background-color: #ffffff !important;
}

html[data-theme="light"] .scroll-expand-hero .text-background {
    color: #050505 !important;
}

html[data-theme="light"] .scroll-expand-hero .hover\:bg-card:hover {
    background-color: rgba(255, 255, 255, 0.13) !important;
}

html[data-theme="light"] .scroll-expand-hero .hover\:bg-foreground\/90:hover {
    background-color: rgba(255, 255, 255, 0.9) !important;
}

/* -----------------------------
   Hero/grid/visual effects
   ----------------------------- */

.hero-grid__mesh {
    background-image: linear-gradient(var(--theme-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--theme-grid-line) 1px, transparent 1px);
}

.hero-grid__glow {
    background: hsl(var(--foreground));
    opacity: 0.075;
}

.hero-section {
    background: radial-gradient(circle at top left, hsl(var(--foreground) / 0.09), transparent 30%), linear-gradient(135deg, var(--theme-hero-start), var(--theme-hero-end));
}

    .hero-section::before {
        background: radial-gradient(circle at 78% 30%, hsl(var(--foreground) / 0.1), transparent 0 22%), radial-gradient(circle at 82% 58%, hsl(var(--foreground) / 0.055), transparent 0 24%), linear-gradient(90deg, hsl(var(--background) / 0.94) 0%, hsl(var(--background) / 0.74) 48%, hsl(var(--background) / 0.56) 100%);
    }

    .hero-section::after {
        background: radial-gradient(circle at 75% 42%, hsl(var(--foreground) / 0.1), transparent 22%), radial-gradient(circle at 86% 20%, hsl(var(--foreground) / 0.06), transparent 18%);
    }

/* -----------------------------
   Forms
   ----------------------------- */

input,
select,
textarea {
    color: hsl(var(--foreground));
}

    input.input-validation-error,
    select.input-validation-error,
    textarea.input-validation-error {
        border-color: hsl(var(--foreground) / 0.28);
        box-shadow: 0 0 0 1px hsl(var(--foreground) / 0.08);
    }

/* -----------------------------
   Scrollbar
   ----------------------------- */

::-webkit-scrollbar-track {
    background: hsl(var(--background));
}

::-webkit-scrollbar-thumb {
    background: hsl(var(--muted-foreground) / 0.38);
}

    ::-webkit-scrollbar-thumb:hover {
        background: hsl(var(--muted-foreground) / 0.55);
    }

/* -----------------------------
   Heavy custom dark sections
   These prevent pages like services/home animated sections from staying pure black.
   ----------------------------- */

html[data-theme="light"] .services-parallax {
    background: hsl(var(--background));
}

html[data-theme="light"] .services-parallax__hero {
    background: radial-gradient(circle at 24% 18%, rgba(0, 0, 0, 0.055), transparent 28%), radial-gradient(circle at 82% 64%, rgba(0, 0, 0, 0.04), transparent 32%), linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 247, 247, 1));
}

html[data-theme="light"] .services-parallax__settle {
    background: radial-gradient(circle at 50% 100%, rgba(0, 0, 0, 0.045), transparent 42%), linear-gradient(180deg, rgba(247, 247, 247, 0.68), hsl(var(--background)) 34%, hsl(var(--background)) 100%);
}

html[data-theme="light"] .services-parallax__settle-panel,
html[data-theme="light"] .career-wizard,
html[data-theme="light"] .career-wizard__status-panel,
html[data-theme="light"] .career-role-card,
html[data-theme="light"] .structured-card,
html[data-theme="light"] .testimonial-card,
html[data-theme="light"] .testimonial-marquee__item {
    border-color: hsl(var(--border));
    background: radial-gradient(circle at top right, rgba(0, 0, 0, 0.035), transparent 34%), linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(250, 250, 250, 0.76));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 24px 42px -34px rgba(0, 0, 0, 0.18);
}

html[data-theme="light"] .services-parallax__card-inner {
    border-color: hsl(var(--border));
    background: radial-gradient(circle at 25% 15%, rgba(0, 0, 0, 0.045), transparent 38%), linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(250, 250, 250, 0.78));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 20px 44px -34px rgba(0, 0, 0, 0.2);
}

html[data-theme="light"] .services-parallax__card h3,
html[data-theme="light"] .services-parallax__target-card h3 {
    color: hsl(var(--foreground));
}

html[data-theme="light"] .services-parallax__card-icon {
    color: hsl(var(--muted-foreground));
}

html[data-theme="light"] .testimonial-marquee::before {
    background: linear-gradient(90deg, hsl(var(--background)) 0%, transparent 100%);
}

html[data-theme="light"] .testimonial-marquee::after {
    background: linear-gradient(270deg, hsl(var(--background)) 0%, transparent 100%);
}

/* -----------------------------
   Reduced motion
   ----------------------------- */

@media (prefers-reduced-motion: reduce) {
    html.theme-changing *,
    html.theme-changing *::before,
    html.theme-changing *::after {
        transition: none !important;
    }
}