/* =============================================================
   Capkiro — Theme: dark/light mode via prefers-color-scheme
   Dark navy + emerald is the default (dark) theme.
   Light theme activates automatically from OS preference.
   ============================================================= */

/* Extended CSS variables not declared in per-page inline styles.
   These cover the hardcoded rgba values used throughout the site. */
:root {
    --nav-bg: rgba(10, 15, 28, 0.9);
    --nav-border: rgba(255, 255, 255, 0.04);
    --mobile-menu-bg: rgba(10, 15, 28, 0.98);
    --input-bg: rgba(255, 255, 255, 0.04);
    --input-border: rgba(255, 255, 255, 0.1);
    --subtle-bg: rgba(255, 255, 255, 0.06);
    --divider-color: rgba(255, 255, 255, 0.05);
    --select-option-bg: #1a2333;
    --muted-text: rgba(148, 163, 184, 0.6);
    --placeholder-color: rgba(148, 163, 184, 0.4);
    --footer-text: rgba(148, 163, 184, 0.5);
    --footer-link: rgba(148, 163, 184, 0.6);
    --hero-glow: rgba(13, 146, 85, 0.1);
    --card-shadow: rgba(0, 0, 0, 0.4);
}

/* ===================== LIGHT MODE OVERRIDES ===================== */
@media (prefers-color-scheme: light) {
    :root {
        /* Core brand vars (re-declared to override inline :root) */
        --emerald: #0D9255;          /* brand stays */
        --emerald-light: #10B96C;    /* brand stays */
        --emerald-glow: rgba(13, 146, 85, 0.08);

        /* Backgrounds */
        --dark: #F0F4F8;
        --dark-mid: #FFFFFF;
        --dark-card: #FFFFFF;

        /* Borders */
        --dark-border: rgba(0, 0, 0, 0.09);

        /* Text */
        --slate: #64748B;
        --slate-light: #334155;
        --white: #0F172A;

        /* Accents */
        --gold: #D97706;
        --gold-soft: rgba(217, 119, 6, 0.1);
        --red: #DC2626;
        --purple: #7C3AED;
        --purple-light: #8B5CF6;
        --purple-soft: rgba(124, 58, 237, 0.1);

        /* Extended vars — light versions */
        --nav-bg: rgba(240, 244, 248, 0.92);
        --nav-border: rgba(0, 0, 0, 0.08);
        --mobile-menu-bg: rgba(255, 255, 255, 0.98);
        --input-bg: rgba(0, 0, 0, 0.03);
        --input-border: rgba(0, 0, 0, 0.12);
        --subtle-bg: rgba(0, 0, 0, 0.04);
        --divider-color: rgba(0, 0, 0, 0.08);
        --select-option-bg: #F8FAFC;
        --muted-text: rgba(71, 85, 105, 0.75);
        --placeholder-color: rgba(71, 85, 105, 0.45);
        --footer-text: rgba(71, 85, 105, 0.65);
        --footer-link: rgba(71, 85, 105, 0.75);
        --hero-glow: rgba(13, 146, 85, 0.07);
        --card-shadow: rgba(0, 0, 0, 0.08);
    }

    /* Smooth transitions for theme-switching elements */
    body, nav, .mobile-menu, footer,
    .auth-card, .form-card, .match-card,
    .pricing-card, .card,
    input, select, textarea, .desig-chip,
    .plan-card, .faq-item, .content-card,
    .section-card, .onboarding-card, .blog-card,
    .compare-card, .feature-row, .insurance-card {
        transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
    }

    /* ---- Explicit light-mode overrides for hardcoded rgba values ---- */

    /* Navbar */
    nav {
        background: var(--nav-bg) !important;
        border-bottom-color: var(--nav-border) !important;
    }

    /* Mobile overlay menu */
    .mobile-menu {
        background: var(--mobile-menu-bg) !important;
    }

    /* Form inputs / selects / textareas */
    .form-group input,
    .form-group select,
    .form-group textarea,
    input[type="email"],
    input[type="password"],
    input[type="text"],
    select, textarea {
        background: var(--input-bg) !important;
        border-color: var(--input-border) !important;
        color: var(--white) !important;
    }

    .form-group input::placeholder,
    input::placeholder {
        color: var(--placeholder-color) !important;
    }

    /* Select dropdown options */
    select option,
    .form-group select option {
        background: var(--select-option-bg) !important;
        color: var(--white) !important;
    }

    /* Designation / filter chips */
    .desig-chip {
        background: var(--input-bg) !important;
        border-color: var(--input-border) !important;
        color: var(--slate) !important;
    }

    /* Category / tag chips */
    .match-category {
        background: var(--subtle-bg) !important;
        color: var(--slate) !important;
    }

    /* Match card dividers */
    .match-details {
        border-top-color: var(--divider-color) !important;
        border-bottom-color: var(--divider-color) !important;
    }

    /* Hero glow radial background */
    .hero::before {
        background: radial-gradient(circle, var(--hero-glow) 0%, transparent 65%) !important;
    }

    /* Card box-shadows — lighten them in light mode */
    .auth-card, .form-card, .match-card {
        box-shadow: 0 8px 32px var(--card-shadow) !important;
    }

    /* Nav link hover in light mode */
    .nav-links a:hover,
    .mobile-menu a:hover {
        color: var(--white) !important;
    }

    /* Force white text on all CTA buttons with emerald backgrounds.
       Fixes specificity issue: .nav-links a overrides .nav-cta color. */
    .nav-cta,
    .nav-links .nav-cta,
    .mobile-cta,
    .mobile-menu .mobile-cta,
    .btn-primary,
    .upgrade-cta,
    .hero-cta,
    .cta-btn {
        color: #FFFFFF !important;
    }

    .nav-cta:hover,
    .nav-links .nav-cta:hover,
    .mobile-cta:hover,
    .mobile-menu .mobile-cta:hover,
    .btn-primary:hover,
    .upgrade-cta:hover,
    .hero-cta:hover,
    .cta-btn:hover {
        color: #FFFFFF !important;
    }

    /* Footer text/links */
    footer p, footer a {
        color: var(--footer-text) !important;
    }

    /* Muted detail labels */
    .match-detail-label {
        color: var(--muted-text) !important;
    }

    .form-note {
        color: var(--muted-text) !important;
    }

    /* Horizontal rules / dividers that use hardcoded colors */
    .divider {
        background: var(--divider-color) !important;
    }

    /* Apply-row and other borders using --dark-border */
    .match-apply-row {
        border-top-color: var(--dark-border) !important;
    }

    /* Blog post body content */
    .post-content p,
    .post-content li,
    .post-content blockquote {
        color: var(--slate) !important;
    }

    /* Tables in blog/compare pages */
    table th {
        background: var(--subtle-bg) !important;
    }

    table tr:hover {
        background: var(--input-bg) !important;
    }
}