/* ===================================================================
   Supreonix corporate retheme for edu.supreonix.com
   Loaded LAST so it overrides the legacy dark/gold theme in style.css.
   The whole legacy theme is driven by CSS variables, so redefining
   them here re-skins every page to the Supreonix light/blue look.
   =================================================================== */

:root,
html.light-mode,
body.light-mode,
.light-mode {
    /* Backgrounds */
    --bg-deep: #ffffff;      /* page background (was near-black) */
    --bg-paper: #ffffff;     /* cards / panels */

    /* Text */
    --text-main: #1f2a3d;    /* body / headings (Supreonix navy-ink) */
    --text-muted: #64748b;   /* secondary text */
    --text-nav-user: #1f2a3d;

    /* Brand accent (was gold #E8B10C) -> Supreonix blue */
    --accent: #2563EB;
    --accent-2: #3478f6;
    --accent-warm: #eef4ff;  /* soft blue tint for warm backgrounds */

    /* Supreonix palette (mirrors main theme-unified.css) */
    --sx-navy: #09162d;
    --sx-navy-2: #0b132b;
    --sx-blue: #2563EB;
    --sx-blue-dark: #1d4ed8;
    --sx-soft: #f5f8fc;
    --sx-line: #dfe7f1;
    --sx-muted: #64748b;
}

/* ---- Global base: light background + Inter everywhere ---- */
html,
body {
    background: #ffffff !important;
    color: var(--text-main);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.section-title, .hero-title, .logo, .logo span {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
}

/* Soften large dark "paper"/section blocks from the legacy theme so
   inner pages sit on the new light canvas instead of near-black. */
section, .section, main, .content, .container-fluid {
    background-color: transparent;
}

/* Legacy accent used gold text on dark; keep it readable on light. */
a { color: var(--accent); }

/* Buttons that used gold background + black text: give them white text
   so they read correctly with the blue accent. */
.btn-primary,
.btn-accent,
.btn-join,
button.accent,
.cta-button,
.btn-primary-nav {
    color: #ffffff !important;
}

/* Cards / panels that hardcoded dark surfaces in the legacy theme */
.card, .glass, .panel, .book-card, .talk-card, .event-card, .video-card {
    background: #ffffff;
    color: var(--text-main);
    border: 1px solid var(--sx-line);
    box-shadow: 0 6px 24px rgba(15, 30, 60, 0.06);
}

/* Muted borders that were white-on-dark */
hr { border-color: var(--sx-line); }

/* Selection */
::selection { background: rgba(37,99,235,0.18); }

/* ===================================================================
   Auth pages (register / login) — they use heavy inline dark styles,
   so we override with !important to sit correctly on the light theme.
   =================================================================== */
.register-form-container,
.login-form-container,
.check-email-overlay,
.auth-card {
    background: #ffffff !important;
    border: 1px solid #e4ebf5 !important;
    border-top: 4px solid #2563EB !important;
    border-radius: 16px !important;
    box-shadow: 0 16px 44px rgba(15, 30, 60, 0.08);
}
.register-form-container h1, .register-form-container h2, .register-form-container h3,
.login-form-container h1, .login-form-container h2, .login-form-container h3,
.check-email-overlay h1, .check-email-overlay h2, .check-email-overlay h3,
.register-brand h1, .register-brand h2, .register-brand h3 {
    color: #0b1f3a !important;
}
.register-brand p, .register-brand .features-list div,
.register-form-container > p, .login-form-container > p,
.check-email-overlay p {
    color: #55627a !important;
}
/* Inputs & selects on auth cards */
.register-form-container input,
.register-form-container select,
.login-form-container input,
.login-form-container select {
    background: #f5f8fc !important;
    border: 1px solid #dfe7f1 !important;
    color: #1f2a3d !important;
    border-radius: 8px !important;
}
.register-form-container input::placeholder,
.login-form-container input::placeholder { color: #94a3b8 !important; }
#phone-container {
    background: #f5f8fc !important;
    border: 1px solid #dfe7f1 !important;
    border-radius: 8px !important;
}
#phone-container input { background: transparent !important; }

/* ===================================================================
   DARK MODE
   Default theme is LIGHT (html.light-mode present). When the visitor
   toggles the theme pill OFF light-mode, these rules repaint the site.
   Scoped to html:not(.light-mode): higher specificity than the plain
   `:root` light vars and the `html{background:#fff!important}` base,
   so dark wins only in the dark state.
   =================================================================== */
html:not(.light-mode) {
    --bg-deep:  #0b1020;   /* page background */
    --bg-paper: #141c2e;   /* cards / panels */
    --text-main: #e6ebf5;
    --text-muted: #9aa7bd;
    --text-nav-user: #e6ebf5;
    --accent:   #3b82f6;
    --accent-2: #60a5fa;
    --accent-warm: #16233c;
    --sx-soft:  #172033;
    --sx-line:  #27324a;
    --sx-muted: #9aa7bd;
}
html:not(.light-mode),
html:not(.light-mode) body,
html:not(.light-mode) body.auth-page {
    background: #0b1020 !important;
    color: #e6ebf5;
}
/* Surfaces */
html:not(.light-mode) .card,
html:not(.light-mode) .glass,
html:not(.light-mode) .panel,
html:not(.light-mode) .book-card,
html:not(.light-mode) .talk-card,
html:not(.light-mode) .event-card,
html:not(.light-mode) .video-card,
html:not(.light-mode) .register-form-container,
html:not(.light-mode) .login-form-container,
html:not(.light-mode) .check-email-overlay,
html:not(.light-mode) .auth-card {
    background: #141c2e !important;
    color: #e6ebf5;
    border-color: #27324a !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.45) !important;
}
/* Headings + body text */
html:not(.light-mode) h1, html:not(.light-mode) h2, html:not(.light-mode) h3,
html:not(.light-mode) h4, html:not(.light-mode) h5, html:not(.light-mode) h6,
html:not(.light-mode) .register-form-container h1, html:not(.light-mode) .register-form-container h2, html:not(.light-mode) .register-form-container h3,
html:not(.light-mode) .register-brand h1,
html:not(.light-mode) .login-form-container h1, html:not(.light-mode) .login-form-container h2, html:not(.light-mode) .login-form-container h3 {
    color: #f1f5fb !important;
}
html:not(.light-mode) p,
html:not(.light-mode) .register-brand p,
html:not(.light-mode) .register-brand .features-list div,
html:not(.light-mode) .register-form-container > p,
html:not(.light-mode) .login-form-container > p { color: #9aa7bd !important; }
/* Header / nav */
html:not(.light-mode) .h-header,
html:not(.light-mode) header.h-header { background: #070d1a !important; }
html:not(.light-mode) .h-contact-bar { background: #05101f !important; }
/* Forms */
html:not(.light-mode) input,
html:not(.light-mode) textarea,
html:not(.light-mode) select,
html:not(.light-mode) .register-form-container input,
html:not(.light-mode) .register-form-container select,
html:not(.light-mode) .login-form-container input,
html:not(.light-mode) .login-form-container select,
html:not(.light-mode) #phone-container {
    background: #0f1626 !important;
    border-color: #27324a !important;
    color: #e6ebf5 !important;
}
html:not(.light-mode) input::placeholder,
html:not(.light-mode) textarea::placeholder { color: #6b7a93 !important; }
/* Tables */
html:not(.light-mode) table { background: #141c2e !important; border-color: #27324a !important; }
html:not(.light-mode) th { background: #0f1626 !important; color: #60a5fa !important; }
html:not(.light-mode) td { color: #c7d0df !important; border-bottom-color: #27324a !important; }
/* Homepage marketing cards (.mkt-*) */
html:not(.light-mode) .mkt-feat,
html:not(.light-mode) .mkt-step,
html:not(.light-mode) .mkt-card,
html:not(.light-mode) .mkt-event,
html:not(.light-mode) .mkt-hero-card,
html:not(.light-mode) .mkt-why,
html:not(.light-mode) .mkt-stats,
html:not(.light-mode) .mkt-book,
html:not(.light-mode) .mkt-cta {
    background: #141c2e !important;
    border-color: #27324a !important;
    color: #e6ebf5 !important;
}
/* Misc */
html:not(.light-mode) hr { border-color: #27324a !important; }
html:not(.light-mode) a { color: #60a5fa; }