/* ═══════════════════════════════════════════════════════════════════ EduForge — UI theme layer (light / dark) ═══════════════════════════════════════════════════════════════════ HOW THEMING WORKS (read this before touching any app-chrome CSS): • The app UI ("chrome": topbars, panels, modals, cards, buttons, …) is painted EXCLUSIVELY with the CSS custom properties below. Light mode is the default: the :root values in main.css / editor.css / this file ARE the light theme and never change. • Dark mode = `html[data-theme="dark"]` overriding the same tokens. assets/js/theme.js sets that attribute before first paint, based on the per-user preference (light | dark | auto). "auto" follows the OS via prefers-color-scheme, live. • RULES FOR ALL FUTURE UI WORK: 1. Never hardcode a chrome color. Use var(--token). If no token fits, add one HERE (light value in :root, dark value in the dark block) — don't invent page-local palettes. 2. Slide CONTENT is authored material, not chrome: the canvas (.slide and everything inside it), exported players' slide area, brand tokens (--brand-*) and project themes must NOT react to the UI theme. Never map slide-content colors to UI tokens. 3. White text on colored (primary/blue/red/green) fills stays literal #fff — it is correct in both themes. 4. After any UI change, eyeball it in BOTH themes (toggle is in the topnav / editor burger / account page). • Token sources: main.css :root (slate palette — dashboard, settings, auth) and editor.css :root (zinc palette — editor, preview) keep their light values; this file adds the missing shared tokens and the single canonical dark palette that overrides BOTH name sets. ═══════════════════════════════════════════════════════════════════ */ /* ── Additive tokens (light values) — safe superset available on every page regardless of which base stylesheet is loaded. Values match the literals they replaced, so light mode is pixel-identical. ── */ :root { --surface-2: #f1f5f9; /* hover fills, subtle wells, table headers */ --border-2: #cbd5e1; /* stronger border / hover border */ --text-2: #475569; /* secondary text */ --text-3: #94a3b8; /* tertiary text, placeholders */ --text-muted: #64748b; --primary: #4f46e5; --primary-h: #4338ca; /* primary hover */ --primary-l: #eef2ff; /* primary tint fill (active nav, chips) */ --primary-border: #c7d2fe; --blue: #2563eb; --blue-bg: #eff6ff; --blue-border: #bfdbfe; --red: #ef4444; --red-h: #dc2626; /* red hover / strong */ --red-bg: #fef2f2; --red-border: #fecaca; --green: #16a34a; --green-bg: #f0fdf4; --green-border:#bbf7d0; --amber: #d97706; --amber-bg: #fffbeb; --amber-border:#fde68a; --overlay: rgba(15, 23, 42, .55); /* modal backdrops */ --chrome-white:#ffffff; /* chrome fills that were literal #fff */ --dot-grid: #d3dae4; /* canvas dot patterns (flow view, …) */ --loader-veil: rgba(248, 250, 252, .96); /* full-screen loading veils */ --surface-glass: rgba(255, 255, 255, .92); /* blurred glass toolbars */ } /* ── Dark theme — overrides BOTH the slate (main.css) and zinc (editor.css) token sets, so every page flips from one place. ── */ html[data-theme="dark"] { color-scheme: dark; /* native scrollbars, inputs, pickers */ /* Soft night palette — deliberately NOT near-black: slightly lifted blue-gray surfaces and gently muted text keep contrast comfortable for long night sessions (no harsh white-on-black glare). */ --bg: #1a1f26; --surface: #232a33; --surface-2: #2c3440; --chrome-white:#232a33; --canvas-bg: #151a20; --dot-grid: #2a323d; --border: #364050; --border-2: #48546a; --text: #e4e9ef; --text-2: #aab5c2; --text-3: #7c8898; --text-muted: #aab5c2; --primary: #6d78f3; --primary-h: #7f8af5; --primary-l: #2d3157; --primary-border: #4d55ad; --secondary: #8f9af9; --accent: #f5a623; --blue: #4f8ef7; --blue-bg: #22314b; --blue-border: #395a90; --red: #f28b8b; --red-h: #ef6a6a; --red-bg: #402b30; --red-border: #6d3d44; --green: #5fd694; --green-bg: #203327; --green-border:#316b46; --amber: #f0bc4e; --amber-bg: #382d18; --amber-border:#7a6425; --overlay: rgba(8, 10, 14, .58); --loader-veil: rgba(26, 31, 38, .96); --surface-glass: rgba(35, 42, 51, .92); /* Flow-view connection colors (defined in flow.css :root) — the neutral edge + violet action read too dim on the dark canvas; lift them. Green/amber edge types are bright enough already. */ --flow-edge: #97a8be; --flow-action: #bfb1ff; --shadow-sm: 0 1px 3px rgba(0,0,0,.4); --shadow: 0 4px 16px rgba(0,0,0,.45); --shadow-lg: 0 8px 32px rgba(0,0,0,.55); --shadow-slide: 0 10px 40px rgba(0,0,0,.45), 0 2px 10px rgba(0,0,0,.35); } /* ── Slide content is authored material — never dark-mode it. The canvas frame around it themes; the slide itself renders exactly as the author designed, in both UI themes. ── */ html[data-theme="dark"] .slide { color-scheme: light; } /* ═══════════════════════════════════════════════════════════════════ Dark-mode component patches For third-party or generated markup whose colors can't be tokenized at the source. Keep this section SHORT — the fix for app CSS is tokenizing the source, not adding patches here. ═══════════════════════════════════════════════════════════════════ */ /* Auth page backdrop — the decorative cyan→indigo wash + dot pattern in main.css is intentionally literal (it's the light look, not chrome). Dark gets a deep-slate equivalent: same three soft radial glows (now subdued blue/indigo on near-black slate) + the same 22px dot grid, just faint and light-on-dark. background-size/attachment inherit from the main.css rule. */ html[data-theme="dark"] .auth-page { background-color: #0e1420; background-image: radial-gradient(ellipse 60% 60% at 12% 12%, rgba(56, 96, 155, .38), transparent 70%), radial-gradient(ellipse 60% 60% at 88% 92%, rgba(91, 76, 160, .30), transparent 70%), radial-gradient(ellipse 50% 40% at 60% 50%, rgba(58, 90, 150, .18), transparent 70%), radial-gradient(circle, rgba(148, 163, 184, .12) 1px, transparent 1px); } /* The animated underline's static track was a white wash tuned for the light backdrop — soften it so the loading bar still reads on slate. */ html[data-theme="dark"] .auth-brand h1 .hl-underline::before { background: rgba(148, 163, 184, .25); } /* The wordmark PNG is dark-on-transparent. invert+hue-rotate flips the dark glyphs to light while keeping colored accents on-hue. Matched by src so every surface (topnav, auth, editor topbar) gets it. */ html[data-theme="dark"] img[src*="logo@2x"] { filter: invert(1) hue-rotate(180deg); } /* Dashboard navy identity chrome (LMS tabs, crumbs, tree accents) keeps its saturated navy in light mode; in dark the navy TEXT flips to the indigo-200/300 range so it reads on tinted fills. Fills that were navy stay navy (white text on them is fine in both themes). */ html[data-theme="dark"] .lms-drill-tab.active { color: #b3bdfb; } html[data-theme="dark"] .lms-drill-tab.active:hover { background: #343963; } html[data-theme="dark"] .lms-drill-tab.active .pill { color: #b3bdfb; }