/* ========================================
   SPENDRAX - LIGHT THEME STYLES
   ========================================
   
   To use light theme, add this CSS file after styles.css:
   <link rel="stylesheet" href="light-theme.css">
   
   Or use the theme toggle in the updated index.html
*/

/* Light Theme Variables Override */
body.light-theme {
    /* Backgrounds */
    --bg-dark: #f8fafc;
    --bg-darker: #ffffff;
    --bg-card: #ffffff;
    --bg-card-hover: #f1f5f9;
    
    /* Text */
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #64748b;
    
    /* Shadows for light theme */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-glow: 0 0 40px rgba(16, 185, 129, 0.2);
}

/* Navbar in light theme */
body.light-theme .navbar {
    background: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

body.light-theme .navbar.scrolled {
    background: rgba(255, 255, 255, 0.95);
}

/* Hero background adjustment */
body.light-theme .hero {
    background: linear-gradient(135deg, #f0fdf4 0%, #eff6ff 50%, #faf5ff 100%);
}

body.light-theme .hero-bg {
    opacity: 0.6;
}

body.light-theme .hero-subtitle {
    color: var(--text-secondary);
}

/* Feature cards */
body.light-theme .feature-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

body.light-theme .feature-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    border-color: rgba(16, 185, 129, 0.3);
}

/* Screenshots section */
body.light-theme .screenshots {
    background: linear-gradient(180deg, transparent 0%, rgba(240, 253, 244, 0.5) 50%, transparent 100%);
}

body.light-theme .screenshot-frame {
    box-shadow: 
        0 0 0 1px rgba(0, 0, 0, 0.08),
        0 20px 40px -10px rgba(0, 0, 0, 0.1);
}

/* Download section */
body.light-theme .download-container {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

body.light-theme .download-btn {
    background: #f8fafc;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

body.light-theme .download-btn:hover {
    background: #ffffff;
    border-color: var(--primary);
}

/* About section */
body.light-theme .graphic-circle {
    border-color: rgba(16, 185, 129, 0.2);
}

/* FAQ section */
body.light-theme .faq {
    background: linear-gradient(180deg, transparent 0%, rgba(248, 250, 252, 0.8) 100%);
}

body.light-theme .faq-item {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

body.light-theme .faq-question:hover {
    background: rgba(0, 0, 0, 0.01);
}

/* Footer */
body.light-theme .footer {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

body.light-theme .social-links a {
    background: #f1f5f9;
    color: var(--text-secondary);
}

body.light-theme .social-links a:hover {
    background: var(--primary);
    color: white;
}

/* Secondary button */
body.light-theme .btn-secondary {
    background: #f1f5f9;
    color: var(--text-primary);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

body.light-theme .btn-secondary:hover {
    background: #e2e8f0;
}

/* Phone mockup */
body.light-theme .phone-frame {
    box-shadow: 
        0 0 0 2px rgba(0, 0, 0, 0.08),
        0 25px 50px -12px rgba(0, 0, 0, 0.15),
        var(--shadow-glow);
}

body.light-theme .phone-screen {
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
}

body.light-theme .app-ui {
    color: var(--text-primary);
}

body.light-theme .transaction {
    background: rgba(0, 0, 0, 0.03);
}

/* Floating cards */
body.light-theme .floating-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Chart bars */
body.light-theme .chart-bar {
    background: rgba(16, 185, 129, 0.2);
}

/* Screen content backgrounds */
body.light-theme .screen-content {
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    color: var(--text-primary);
}

body.light-theme .screen-header {
    color: var(--text-secondary);
}

body.light-theme .legend-item {
    color: var(--text-secondary);
}

body.light-theme .budget-title {
    color: var(--text-primary);
}

body.light-theme .budget-remaining {
    color: var(--text-muted);
}

body.light-theme .txn-details small {
    color: var(--text-muted);
}

body.light-theme .category-tag {
    background: rgba(16, 185, 129, 0.1);
}

body.light-theme .txn-item {
    background: rgba(0, 0, 0, 0.02);
}

/* Download section stats bar */
body.light-theme .download-stats-bar {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

/* Footer bottom */
body.light-theme .footer-bottom {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

/* Scroll indicator */
body.light-theme .mouse {
    border-color: var(--text-muted);
}

body.light-theme .wheel {
    background: var(--text-muted);
}

body.light-theme .scroll-indicator span {
    color: var(--text-muted);
}

/* Nav links */
body.light-theme .nav-link {
    color: var(--text-secondary);
}

body.light-theme .nav-link:hover {
    color: var(--text-primary);
}

/* Mobile menu */
body.light-theme .mobile-menu-toggle span {
    background: var(--text-primary);
}

/* Hero stats divider */
body.light-theme .stat-divider {
    background: rgba(0, 0, 0, 0.1);
}

/* Section subtitle */
body.light-theme .section-subtitle {
    color: var(--text-secondary);
}

/* CTA box */
body.light-theme .cta-box {
    box-shadow: 0 20px 50px rgba(16, 185, 129, 0.2);
}