/* Light theme for mobile-app.html inline styles (load after embedded <style>) */

html[data-theme="light"] body {
    background: var(--color-bg-page) !important;
    color: var(--color-text-heading) !important;
}

html[data-theme="light"] .mobile-container {
    background: var(--color-bg-page) !important;
}

html[data-theme="light"] .hero-section {
    background-color: var(--color-bg-surface) !important;
}

html[data-theme="light"] .section-title,
html[data-theme="light"] .section-heading {
    color: var(--color-text-heading) !important;
}

html[data-theme="light"] .section-subtitle {
    color: var(--color-text-muted) !important;
}

html[data-theme="light"] .benefits-list li,
html[data-theme="light"] .features-list li {
    color: var(--color-text-heading) !important;
}

html[data-theme="light"] .features-box {
    background: var(--color-bg-surface) !important;
    border-color: var(--color-accent) !important;
}

html[data-theme="light"] .features-box h3 {
    color: var(--color-text-heading) !important;
}

html[data-theme="light"] .features-list li::before {
    background: var(--color-accent) !important;
    color: var(--color-white) !important;
}

html[data-theme="light"] .download-section {
    background: var(--color-bg-surface) !important;
    border-top-color: var(--color-border) !important;
}

html[data-theme="light"] .download-label {
    color: var(--color-text-heading) !important;
}

html[data-theme="light"] .download-label:hover {
    color: var(--color-accent) !important;
}

html[data-theme="light"] .back-to-practice {
    background: var(--color-bg-surface) !important;
}

html[data-theme="light"] .back-btn {
    background: var(--color-accent) !important;
    color: var(--color-text-on-accent) !important;
}

html[data-theme="light"] .back-btn:hover {
    background: var(--color-accent-hover) !important;
}

html[data-theme="light"] footer {
    background: var(--color-bg-footer) !important;
    color: var(--color-text-seo) !important;
    border-top-color: var(--color-border) !important;
}

html[data-theme="light"] .footer-message {
    color: var(--color-accent) !important;
}

html[data-theme="light"] .footer-copyright {
    color: var(--color-text-faint) !important;
}

html[data-theme="light"] hr {
    border-top-color: var(--color-border) !important;
}