/* ============================================ OUDIFY — Light Theme Override Applied when [data-theme="light"] is on ============================================ */ [data-theme="light"] { /* --- Backgrounds --- */ --bg-deep: #f5f3ee; --bg-surface: rgba(0, 0, 0, 0.02); --bg-glass: rgba(255, 255, 255, 0.75); --bg-glass-hover: rgba(255, 255, 255, 0.9); --bg-glass-active: rgba(255, 255, 255, 0.95); --bg-elevated: rgba(255, 255, 255, 0.85); /* --- Borders --- */ --border-glass: rgba(0, 0, 0, 0.08); --border-glass-hover: rgba(0, 0, 0, 0.15); --border-glass-accent: rgba(180, 130, 60, 0.25); --border-glass-accent-strong: rgba(180, 130, 60, 0.4); /* --- Accent Colors --- */ --accent-primary: #a67c3d; --accent-primary-rgb: 166, 124, 61; --accent-glow: rgba(166, 124, 61, 0.1); --accent-glow-strong: rgba(166, 124, 61, 0.2); --accent-gold: #8b6220; --accent-gold-light: #bf8a3a; /* --- Text --- */ --text-primary: #1a1816; --text-secondary: rgba(26, 24, 22, 0.6); --text-muted: rgba(26, 24, 22, 0.38); /* --- Semantic Colors --- */ --success: #16a34a; --success-glow: rgba(22, 163, 74, 0.1); --warning: #d97706; --warning-glow: rgba(217, 119, 6, 0.1); --danger: #dc2626; --danger-glow: rgba(220, 38, 38, 0.1); /* --- Shadows --- */ --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.06); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08); --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.1); --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.12); --shadow-glow: 0 0 20px rgba(166, 124, 61, 0.1); --shadow-glow-strong: 0 0 40px rgba(166, 124, 61, 0.15); --shadow-inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.7); /* Gold overrides */ --gold-400: #a67c3d; } /* Override body background gradient */ [data-theme="light"] body { background-color: var(--bg-deep); } [data-theme="light"] body::before { background: radial-gradient(ellipse at 20% 50%, rgba(166, 124, 61, 0.04) 0%, transparent 50%), radial-gradient(ellipse at 80% 20%, rgba(166, 124, 61, 0.03) 0%, transparent 50%), radial-gradient(ellipse at 50% 80%, rgba(100, 80, 60, 0.02) 0%, transparent 50%); } /* Glass panels in light mode */ [data-theme="light"] .glass { background: rgba(255, 255, 255, 0.7); border-color: rgba(0, 0, 0, 0.06); backdrop-filter: blur(20px) saturate(1.3); } [data-theme="light"] .glass:hover { background: rgba(255, 255, 255, 0.85); } /* Scrollbar */ [data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.12); } [data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.2); } /* Selection */ [data-theme="light"] ::selection { background: rgba(166, 124, 61, 0.2); color: var(--text-primary); } /* Sidebar */ [data-theme="light"] .sidebar { background: rgba(255, 255, 255, 0.85); border-right: 1px solid rgba(0, 0, 0, 0.06); } [data-theme="light"] .sidebar__link:hover { background: rgba(0, 0, 0, 0.04); } [data-theme="light"] .sidebar__link.active { background: rgba(166, 124, 61, 0.08); color: var(--accent-primary); } /* Buttons */ [data-theme="light"] .btn--primary { color: #fff; } [data-theme="light"] .btn--ghost { background: rgba(255, 255, 255, 0.6); border-color: rgba(0, 0, 0, 0.1); } /* Canvas pages */ [data-theme="light"] .gecki-canvas-wrap { background: rgba(245, 243, 238, 0.8); } /* Option buttons in lessons */ [data-theme="light"] .option-btn { background: rgba(255, 255, 255, 0.7); border-color: rgba(0, 0, 0, 0.08); } [data-theme="light"] .option-btn:hover { background: rgba(255, 255, 255, 0.9); border-color: rgba(0, 0, 0, 0.15); }