/* ═══════════════════════════════════════════════════════════════════════ Wave 4B — Light Theme CSS Custom Properties Override Applied when data-theme="light" is set on . Works alongside the dark theme defaults in base.html. ═══════════════════════════════════════════════════════════════════════ */ [data-theme="light"] { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 262.1 83.3% 57.8%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 100%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 262.1 83.3% 57.8%; } /* ── Glass effects for light mode ──────────────────────────────────── */ [data-theme="light"] .glass-effect { backdrop-filter: blur(10px); background: rgba(255, 255, 255, 0.8) !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); } /* ── Card shadows in light mode ────────────────────────────────────── */ [data-theme="light"] .rounded-xl.border, [data-theme="light"] .rounded-lg.border { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); } /* ── Gradient backgrounds for light mode ───────────────────────────── */ [data-theme="light"] .gradient-bg { background: linear-gradient(135deg, hsl(0 0% 100%) 0%, hsl(210 40% 96%) 100%); } [data-theme="light"] .card-gradient { background: linear-gradient(135deg, hsl(210 40% 98%) 0%, hsl(0 0% 100%) 100%); } /* ── Neon border toned down for light mode ─────────────────────────── */ [data-theme="light"] .neon-border { box-shadow: 0 0 3px hsl(262.1 83.3% 57.8% / 0.3), inset 0 0 3px hsl(262.1 83.3% 57.8% / 0.1); } /* ── Scrollbar for light mode ──────────────────────────────────────── */ [data-theme="light"] .scrollbar-custom::-webkit-scrollbar-track { background: hsl(210 40% 96%); } [data-theme="light"] .scrollbar-custom::-webkit-scrollbar-thumb { background: hsl(215.4 16.3% 76%); } [data-theme="light"] .scrollbar-custom::-webkit-scrollbar-thumb:hover { background: hsl(215.4 16.3% 60%); } /* ── Body background for light mode ────────────────────────────────── */ [data-theme="light"] body { background-color: hsl(210 40% 98%); background-image: none; }