/* =========================================================== Dasa — Light theme Loaded after styles.css. Active when . =========================================================== */ html[data-theme="light"] { color-scheme: light; } html[data-theme="light"] { --bg: oklch(0.985 0.005 250); --fg: oklch(0.22 0.03 270); --muted: oklch(0.52 0.025 265); --card: oklch(1 0 0); --border: oklch(0.62 0.04 275 / 35%); --primary: oklch(0.58 0.15 235); --accent: oklch(0.55 0.2 300); --primary-fg: oklch(0.99 0.005 250); } html[data-theme="light"] body { background-color: var(--bg); color: var(--fg); background-image: radial-gradient(ellipse 60% 50% at 15% 0%, oklch(0.7 0.14 235 / 0.14), transparent 60%), radial-gradient(ellipse 60% 50% at 85% 20%, oklch(0.62 0.2 300 / 0.12), transparent 60%), radial-gradient(ellipse 40% 40% at 50% 100%, oklch(0.62 0.2 300 / 0.07), transparent 60%); } /* Grid backdrop */ html[data-theme="light"] .bg-grid { opacity: 0.5; background-image: linear-gradient(oklch(0.55 0.12 250 / 0.09) 1px, transparent 1px), linear-gradient(90deg, oklch(0.55 0.12 250 / 0.09) 1px, transparent 1px); } /* Gradient text */ html[data-theme="light"] .gradient-text { background: linear-gradient(135deg, oklch(0.55 0.16 240), oklch(0.5 0.2 305)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Nav */ html[data-theme="light"] .nav-cta { background: oklch(0.55 0.12 250 / 0.1); color: var(--fg); } html[data-theme="light"] .nav-cta:hover { background: oklch(0.55 0.12 250 / 0.18); } html[data-theme="light"] .lang-switch button.active, html[data-theme="light"] .theme-switch button.active { background: linear-gradient(135deg, oklch(0.58 0.15 235), oklch(0.55 0.2 300)); color: var(--primary-fg); } /* Cards / panels that used baked-in dark gradients */ html[data-theme="light"] .module, html[data-theme="light"] .mobile-card, html[data-theme="light"] .glow-border { background: linear-gradient(180deg, oklch(1 0 0 / 0.95), oklch(0.975 0.008 255 / 0.92)); border: 1px solid oklch(0.6 0.05 265 / 0.28); box-shadow: 0 1px 0 oklch(1 0 0) inset, 0 18px 45px -22px oklch(0.45 0.1 270 / 0.28); } html[data-theme="light"] .module:hover { box-shadow: 0 1px 0 oklch(1 0 0) inset, 0 26px 55px -22px oklch(0.45 0.14 270 / 0.35); } /* Domain / category chips */ html[data-theme="light"] .cat-domains .d2 { background: color-mix(in oklch, var(--accent) 14%, transparent); color: oklch(0.42 0.18 300); } html[data-theme="light"] .cat-domains .d1 { background: color-mix(in oklch, var(--primary) 12%, transparent); color: oklch(0.45 0.15 240); } html[data-theme="light"] .cat-subs span { background: oklch(1 0 0 / 0.8); } html[data-theme="light"] .store-badge { background: oklch(1 0 0 / 0.85); } html[data-theme="light"] .store-badge svg { color: var(--fg); } /* Feature icon glow is too strong on white */ html[data-theme="light"] .feat-i { filter: none; } html[data-theme="light"] .hero-art img, html[data-theme="light"] .mobile-art img { filter: drop-shadow(0 18px 45px oklch(0.5 0.16 290 / 0.3)); } /* ---- Theme switch control ---- */ .theme-switch { display: inline-flex; align-items: center; gap: 0.125rem; padding: 0.25rem; border-radius: 999px; border: 1px solid var(--border); background: color-mix(in oklch, var(--card) 60%, transparent); backdrop-filter: blur(8px); } .theme-switch button { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 999px; color: var(--muted); } .theme-switch button.active { background: linear-gradient(135deg, oklch(0.85 0.16 210), oklch(0.65 0.24 300)); color: var(--primary-fg); } .theme-switch button svg { width: 15px; height: 15px; }