/* * Skynext Academy — Theme System * ─────────────────────────────────────────────────────────── * Light default + dark toggle. Activate by setting `data-theme="light|dark"` * en el . Las páginas alumno (landing, dashboard, course-detail, * module-viewer) usan estas vars. Filament admin tiene su propio theme. */ :root, html[data-theme="light"] { /* Backgrounds */ --bg: #ffffff; --bg-2: #f8fafc; --bg-3: #f3f4f6; --surface: #ffffff; --surface-2: #f9fafb; --elevated: #ffffff; /* Borders */ --border: #e5e7eb; --border-strong: #d1d5db; --border-mute: #f3f4f6; /* Text */ --text: #0f172a; --text-2: #334155; --text-3: #64748b; --text-mute: #94a3b8; --text-on-primary: #ffffff; /* Brand */ --green: #16a34a; --green-2: #15803d; --green-soft: rgba(34, 197, 94, 0.10); --green-mute: rgba(34, 197, 94, 0.04); /* Status */ --amber: #d97706; --danger: #dc2626; --info: #2563eb; /* Shadows */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow: 0 4px 12px rgba(15, 23, 42, 0.08); --shadow-lg: 0 20px 50px rgba(15, 23, 42, 0.12); /* Hero gradients */ --hero-glow-1: rgba(34, 197, 94, 0.10); --hero-glow-2: rgba(34, 197, 94, 0.05); /* Navbar blur */ --nav-bg: rgba(255, 255, 255, 0.80); color-scheme: light; } html[data-theme="dark"] { /* Backgrounds */ --bg: #020617; --bg-2: #0d1117; --bg-3: #161b22; --surface: #0d1117; --surface-2: #161b22; --elevated: #1e293b; /* Borders */ --border: #30363d; --border-strong: #475569; --border-mute: #1e293b; /* Text */ --text: #f8fafc; --text-2: #cbd5e1; --text-3: #94a3b8; --text-mute: #64748b; --text-on-primary: #0d1117; /* Brand */ --green: #22c55e; --green-2: #16a34a; --green-soft: rgba(34, 197, 94, 0.12); --green-mute: rgba(34, 197, 94, 0.06); /* Status */ --amber: #f59e0b; --danger: #ef4444; --info: #3b82f6; /* Shadows */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.5); /* Hero gradients */ --hero-glow-1: rgba(34, 197, 94, 0.18); --hero-glow-2: rgba(34, 197, 94, 0.10); /* Navbar blur */ --nav-bg: rgba(2, 6, 23, 0.85); color-scheme: dark; } /* Smooth theme transition */ html { transition: background-color .2s ease, color .2s ease; } body { background-color: var(--bg); color: var(--text); transition: background-color .2s ease, color .2s ease; } /* ─── Theme toggle button ─────────────────────────────────── */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 8px; background: transparent; border: 1px solid var(--border); color: var(--text-2); cursor: pointer; font-size: 16px; line-height: 1; transition: all .15s ease; padding: 0; } .theme-toggle:hover { background: var(--bg-3); color: var(--text); border-color: var(--border-strong); } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: inline; } html[data-theme="dark"] .theme-toggle .icon-sun { display: inline; } html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }