/* theme.css — system-aware light / dark (HeyGen-inspired) */
:root,
html[data-theme="light"] {
    color-scheme: light;
    --bg-page: #f6f5f1;
    --bg-card: #ffffff;
    --bg-soft: #eeedea;
    --border-color: #e0dfdb;
    --border-light: #d0cfcb;
    --text-main: #1a1a1a;
    --text-muted: #6b6b6b;
    --heading: #0a0a0a;
    --primary: #0a0a0a;
    --primary-hover: #2a2a2a;
    --accent-blue: #3b82f6;
    --accent-gold: #fcca69;
    --accent-yellow: #fcca69;
    --accent-green: #22c55e;
    --accent-purple: #8b5cf6;
    --accent-pink: #ec4899;
    --error: #ef4444;
    --success: #16a34a;
    --shadow-soft: 0 1px 2px rgba(10, 10, 10, 0.04), 0 12px 32px rgba(10, 10, 10, 0.08);
    --shadow-lift: 0 20px 50px rgba(10, 10, 10, 0.14);
    --cinema-overlay: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.55) 100%);
}

html[data-theme="dark"] {
    color-scheme: dark;
    --bg-page: #000000;
    --bg-card: #121212;
    --bg-soft: #1a1a1a;
    --border-color: #2a2a2a;
    --border-light: #3a3a3a;
    --text-main: #ffffff;
    --text-muted: #c4c4c4;
    --heading: #ffffff;
    --primary: #ffffff;
    --primary-hover: #e8e8e8;
    --accent-blue: #60a5fa;
    --accent-gold: #fcca69;
    --accent-yellow: #fcca69;
    --accent-green: #4ade80;
    --accent-purple: #c4b5fd;
    --accent-pink: #f9a8d4;
    --error: #f87171;
    --success: #4ade80;
    --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.35), 0 12px 32px rgba(0, 0, 0, 0.45);
    --shadow-lift: 0 24px 60px rgba(0, 0, 0, 0.55);
    --cinema-overlay: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, 0.72) 100%);
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]):not([data-theme="dark"]) {
        color-scheme: dark;
        --bg-page: #000000;
        --bg-card: #121212;
        --bg-soft: #1a1a1a;
        --border-color: #2a2a2a;
        --border-light: #3a3a3a;
        --text-main: #ffffff;
        --text-muted: #c4c4c4;
        --heading: #ffffff;
        --primary: #ffffff;
        --primary-hover: #e8e8e8;
        --accent-blue: #60a5fa;
        --accent-gold: #fcca69;
        --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.35), 0 12px 32px rgba(0, 0, 0, 0.45);
        --shadow-lift: 0 24px 60px rgba(0, 0, 0, 0.55);
        --cinema-overlay: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, 0.72) 100%);
    }
}

body {
    background: var(--bg-page) !important;
    color: var(--text-main) !important;
    transition: background-color 0.35s ease, color 0.35s ease;
}

.theme-toggle {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-main);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1), box-shadow 0.25s, background 0.25s;
}
.theme-toggle:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: var(--shadow-soft);
    background: var(--bg-soft);
}
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: inline; }
html[data-theme="dark"] .theme-toggle .icon-sun { display: inline; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .theme-toggle .icon-sun { display: inline; }
    html:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}

/* Dark mode: force readable white text (overrides hardcoded #0a0a0a on index) */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] .hero h1,
html[data-theme="dark"] .section-head h2,
html[data-theme="dark"] .tool-card h3,
html[data-theme="dark"] .feature-card h3,
html[data-theme="dark"] .showcase-text h2,
html[data-theme="dark"] .step-card h3,
html[data-theme="dark"] .usecase-tile h4,
html[data-theme="dark"] .footer-col h5,
html[data-theme="dark"] .ba-lang,
html[data-theme="dark"] .ba-script-box h4 {
    color: #ffffff !important;
}
html[data-theme="dark"] .tool-card:hover .go,
html[data-theme="dark"] .tool-card:hover h3 {
    color: #ffffff !important;
}
html[data-theme="dark"] .lang-section {
    background: linear-gradient(180deg, #121212, #0a0a0a) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .btn-login {
    background: var(--bg-card) !important;
    color: #ffffff !important;
}
html[data-theme="dark"] .menu-btn {
    background: #fcca69 !important;
    border-color: #fcca69 !important;
    color: #0a0a0a !important;
}
html[data-theme="dark"] .menu-btn:hover {
    background: #f5bc52 !important;
    border-color: #f5bc52 !important;
    color: #0a0a0a !important;
}
html[data-theme="dark"] .menu-btn i {
    color: #0a0a0a !important;
}
html[data-theme="dark"] .btn-signup,
html[data-theme="dark"] .btn-cta.primary {
    background: var(--accent-gold) !important;
    color: #0a0a0a !important;
    border-color: var(--accent-gold) !important;
}
html[data-theme="dark"] .btn-cta.primary:hover,
html[data-theme="dark"] .btn-signup:hover {
    background: #ffffff !important;
    color: #0a0a0a !important;
}
html[data-theme="dark"] .balance-text {
    background: #1f1a10 !important;
    border-color: #4a3b1a !important;
    color: var(--accent-gold) !important;
}
html[data-theme="dark"] .step-num {
    background: var(--bg-soft) !important;
    color: #ffffff !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .feature-icon.feature-icon--shell i {
    color: #ffffff !important;
}
html[data-theme="dark"] .tool-card .ico.ico--asset img,
html[data-theme="dark"] .feature-icon.feature-icon--shell img {
    /* PNG icons ship on black — lighten keeps mark visible on dark cards */
    mix-blend-mode: lighten !important;
}
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) h1,
    html:not([data-theme="light"]) h2,
    html:not([data-theme="light"]) h3,
    html:not([data-theme="light"]) h4,
    html:not([data-theme="light"]) .hero h1,
    html:not([data-theme="light"]) .section-head h2,
    html:not([data-theme="light"]) .tool-card h3,
    html:not([data-theme="light"]) .feature-card h3 {
        color: #ffffff !important;
    }
    html:not([data-theme="light"]) .lang-section {
        background: linear-gradient(180deg, #121212, #0a0a0a) !important;
    }
    html:not([data-theme="light"]) .menu-btn {
        background: #fcca69 !important;
        border-color: #fcca69 !important;
        color: #0a0a0a !important;
    }
    html:not([data-theme="light"]) .menu-btn i {
        color: #0a0a0a !important;
    }
}