/* ========================================================================== theme-light.css - Light Theme Overrides for EzTuti Tips Applied when ========================================================================== */ [data-theme="light"] { /* ---- Backgrounds ---- */ --color-bg-primary: #f8fafc; --color-bg-secondary: #ffffff; --color-bg-tertiary: #f1f5f9; /* ---- Text ---- */ --color-text-primary: #0f172a; --color-text-secondary: #475569; --color-text-muted: #94a3b8; /* ---- Accents (darker for contrast on light bg) ---- */ --color-accent-primary: #059669; --color-accent-secondary: #0284c7; /* ---- Semantic Colors ---- */ --color-success: #16a34a; --color-warning: #d97706; --color-error: #dc2626; --color-info: #2563eb; /* ---- Borders ---- */ --color-border: rgba(15, 23, 42, 0.1); --color-border-hover: rgba(15, 23, 42, 0.2); /* ---- Cards & Inputs ---- */ --color-card-bg: #ffffff; --color-input-bg: #f8fafc; --color-input-border: rgba(15, 23, 42, 0.15); --color-input-focus: var(--color-accent-primary); /* ---- Gradients ---- */ --gradient-accent: linear-gradient(135deg, #059669, #0284c7); --gradient-accent-hover: linear-gradient(135deg, #0284c7, #059669); --gradient-bg: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%); --gradient-hero: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #f8fafc 100%); /* ---- Shadows (standard, no glow) ---- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.05); --shadow-glow: 0 4px 14px rgba(5, 150, 105, 0.12); --shadow-glow-accent: 0 4px 14px rgba(2, 132, 199, 0.12); --shadow-glow-strong: 0 8px 24px rgba(5, 150, 105, 0.18); /* ---- Navbar ---- */ --navbar-bg: rgba(255, 255, 255, 0.9); --navbar-border: rgba(15, 23, 42, 0.08); /* ---- Sidebar ---- */ --sidebar-bg: #ffffff; /* ---- Overlay & Backdrop ---- */ --overlay-bg: rgba(15, 23, 42, 0.4); --backdrop-blur: blur(12px); color-scheme: light; } /* ---- Light theme specific element styles ---- */ [data-theme="light"] ::selection { background: rgba(5, 150, 105, 0.2); color: #0f172a; } [data-theme="light"] ::-webkit-scrollbar { width: 8px; height: 8px; } [data-theme="light"] ::-webkit-scrollbar-track { background: #f1f5f9; } [data-theme="light"] ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; } [data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } /* Light theme placeholder text */ [data-theme="light"] input::placeholder, [data-theme="light"] textarea::placeholder { color: #94a3b8; } /* Light theme horizontal rule */ [data-theme="light"] hr { border-color: rgba(15, 23, 42, 0.08); } /* Light theme code blocks */ [data-theme="light"] code, [data-theme="light"] pre { background: #f1f5f9; color: #1e293b; } /* Light theme focus ring uses muted accent */ [data-theme="light"] :focus-visible { outline-color: var(--color-accent-primary); } /* ---- Light theme: Hero section overrides ---- */ [data-theme="light"] .hero-badge { background: rgba(5, 150, 105, 0.08); border-color: rgba(5, 150, 105, 0.2); } [data-theme="light"] .hero-section::after { background: radial-gradient( circle at 30% 50%, rgba(5, 150, 105, 0.06) 0%, transparent 50% ), radial-gradient( circle at 70% 50%, rgba(2, 132, 199, 0.06) 0%, transparent 50% ); } /* ---- Light theme: Feature card icon ---- */ [data-theme="light"] .feature-card-icon { background: rgba(5, 150, 105, 0.08); } /* ---- Light theme: Premium lock overlay ---- */ [data-theme="light"] .premium-lock-overlay { background: rgba(248, 250, 252, 0.9); } /* ---- Light theme: Match card live border ---- */ [data-theme="light"] .match-card.is-live { border-color: rgba(220, 38, 38, 0.3); box-shadow: 0 0 12px rgba(220, 38, 38, 0.08); } /* ---- Light theme: Live section ---- */ [data-theme="light"] .live-section { background: #ffffff; border-color: rgba(220, 38, 38, 0.2); box-shadow: 0 0 20px rgba(220, 38, 38, 0.04), var(--shadow-sm); } [data-theme="light"] .live-section-badge { background: rgba(220, 38, 38, 0.06); border-color: rgba(220, 38, 38, 0.15); } [data-theme="light"] .live-section-dot { background: #dc2626; box-shadow: 0 0 6px rgba(220, 38, 38, 0.4); } [data-theme="light"] .live-section-label { color: #dc2626; } /* ---- Light theme: Stat card glow ---- */ [data-theme="light"] .stat-card { box-shadow: var(--shadow-sm); } [data-theme="light"] .stat-card:hover { box-shadow: var(--shadow-md); } /* ---- Light theme: Tip card refinements ---- */ [data-theme="light"] .tip-card:hover { box-shadow: var(--shadow-md); } [data-theme="light"] .tip-card-premium-overlay { background: rgba(248, 250, 252, 0.9); backdrop-filter: blur(6px); } /* ---- Light theme: CTA section ---- */ [data-theme="light"] .cta-section { background: linear-gradient(135deg, #ecfdf5 0%, #e0f2fe 100%); } /* ---- Light theme: Auth card ---- */ [data-theme="light"] .auth-card { box-shadow: 0 4px 24px rgba(15, 23, 42, 0.08); } /* ---- Light theme: Bottom tab bar glow ---- */ [data-theme="light"] .bottom-tab.active .bottom-tab-icon { filter: drop-shadow(0 0 6px rgba(5, 150, 105, 0.35)); } [data-theme="light"] .bottom-tab.active::before { box-shadow: 0 0 8px rgba(5, 150, 105, 0.4), 0 0 16px rgba(5, 150, 105, 0.15); }