/* ========================================================================== LearningByDesign — Design Tokens v2 (2026-05-18) Two themes, one token model. Theme is set via `body.theme-light` / `body.theme-dark` + `[data-theme="light|dark"]` on . The existing `.app-theme-toggle` button flips both already. We only define tokens here. Brand identity (Learning product): PRIMARY = Red (#FF2A40 neon in dark, #DC2626 muted in light) ACCENT = Cyan (#00F0FF neon in dark, #0891B2 muted in light) Shared across both themes: Fonts (Orbitron heads, Instrument Sans body) Motion (ease curves, speeds) Radii, sidebar/topbar sizes, type rules Loaded AFTER /styles.css and BEFORE any view-specific override. ========================================================================== */ /* ── SHARED TOKENS (theme-agnostic) ────────────────────────────────────── */ :root { /* Typography */ --font-head: 'Orbitron', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-body: 'Instrument Sans', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, monospace; /* Motion */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --speed-fast: 150ms; --speed: 250ms; --speed-slow: 400ms; /* Radii */ --radius-sm: 6px; --radius: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill:999px; /* Layout */ --sidebar-w: 240px; --sidebar-collapsed-w: 64px; --topbar-h: 56px; } /* ── LIGHT THEME (cream base, muted red+cyan, subtle glows) ────────────── */ :root, body.theme-light, [data-theme="light"] { /* Surfaces */ --bg: #FBF9F5; --bg-elevated: #FFFFFF; --surface: #FFFFFF; --surface2: #F4F0E8; --surface3: #ECE5D5; --border: #E3DDD0; --border-strong: #C9C0AE; --border-subtle: #EFEAE0; /* Text */ --text: #1C1C1C; --text-primary: #1C1C1C; --text-secondary: #4A4A4A; --text-tertiary: #6B6B6B; --muted: #8A8580; --muted2: #B5B0A8; --text-bright: #0A0A0A; /* Brand — Red primary, Cyan accent (muted for light) */ --brand-primary: #DC2626; --brand-deep: #991B1B; --brand-soft: #F87171; --brand-tint: rgba(220, 38, 38, 0.08); --brand-glow: rgba(220, 38, 38, 0.20); --cyan: #0891B2; --cyan-deep: #155E75; --cyan-soft: #67E8F9; --cyan-tint: rgba(8, 145, 178, 0.08); --cyan-glow: rgba(8, 145, 178, 0.20); /* Legacy mint aliases — kill the mint, redirect to brand red so any old code still using --brand-mint immediately picks up the new identity. */ --brand-mint: var(--brand-primary); --brand-mint-glow: var(--brand-glow); /* Semantic */ --success: #10B981; --success-tint: rgba(16, 185, 129, 0.10); --success-glow: rgba(16, 185, 129, 0.25); --warning: #F59E0B; --warning-tint: rgba(245, 158, 11, 0.10); --warning-glow: rgba(245, 158, 11, 0.25); --danger: #EF4444; --danger-tint: rgba(239, 68, 68, 0.10); --danger-glow: rgba(239, 68, 68, 0.25); --info: #3B82F6; --info-tint: rgba(59, 130, 246, 0.10); /* Glows — subtle in light mode */ --glow-brand: 0 0 8px var(--brand-glow), 0 0 20px rgba(220, 38, 38, 0.06); --glow-cyan: 0 0 8px var(--cyan-glow), 0 0 20px rgba(8, 145, 178, 0.06); --glow-mint: var(--glow-brand); /* mint glow redirects to brand glow */ --glow-warn: 0 0 8px var(--warning-glow); --glow-danger:0 0 8px var(--danger-glow); --glow-line: 0 0 1px var(--brand-glow); /* Shadows */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.06); --shadow: 0 4px 6px rgba(0,0,0,0.05), 0 10px 15px rgba(0,0,0,0.08); --shadow-lg: 0 10px 25px rgba(0,0,0,0.10), 0 20px 40px rgba(0,0,0,0.08); } /* ── DARK THEME (Tron — near-black, neon red + cyan, full glow) ────────── */ body.theme-dark, [data-theme="dark"] { /* Surfaces */ --bg: #0A0C10; --bg-elevated: #111318; --surface: #111318; --surface2: #181B22; --surface3: #1E2130; --border: #2A2E3F; --border-strong: #3A3F55; --border-subtle: #1F2230; /* Text */ --text: #E8EAF0; --text-primary: #E8EAF0; --text-secondary: #B5B8C5; --text-tertiary: #8A8F9F; --muted: #6B7080; --muted2: #4A4F60; --text-bright: #FFFFFF; /* Brand — Red primary, Cyan accent (full neon for dark) */ --brand-primary: #FF2A40; --brand-deep: #C71F31; --brand-soft: #FF4F6B; --brand-tint: rgba(255, 42, 64, 0.10); --brand-glow: rgba(255, 42, 64, 0.35); --cyan: #00F0FF; --cyan-deep: #00B5C2; --cyan-soft: #66F7FF; --cyan-tint: rgba(0, 240, 255, 0.10); --cyan-glow: rgba(0, 240, 255, 0.35); /* Legacy mint aliases redirect to brand-primary in dark mode as well */ --brand-mint: var(--brand-primary); --brand-mint-glow: var(--brand-glow); /* Semantic (slightly brighter on dark) */ --success: #00E676; --success-tint: rgba(0, 230, 118, 0.12); --success-glow: rgba(0, 230, 118, 0.35); --warning: #FFAB40; --warning-tint: rgba(255, 171, 64, 0.12); --warning-glow: rgba(255, 171, 64, 0.35); --danger: #FF2A40; --danger-tint: rgba(255, 42, 64, 0.12); --danger-glow: rgba(255, 42, 64, 0.35); --info: #40C4FF; --info-tint: rgba(64, 196, 255, 0.12); /* Glows — full neon in dark mode */ --glow-brand: 0 0 12px var(--brand-glow), 0 0 32px rgba(255, 42, 64, 0.12); --glow-cyan: 0 0 12px var(--cyan-glow), 0 0 32px rgba(0, 240, 255, 0.12); --glow-mint: var(--glow-brand); /* mint glow redirects to brand glow */ --glow-warn: 0 0 12px var(--warning-glow); --glow-danger:0 0 12px var(--danger-glow); --glow-line: 0 0 1px rgba(0, 240, 255, 0.6); /* Shadows (deeper to read against dark bg) */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.30), 0 1px 3px rgba(0,0,0,0.40); --shadow: 0 4px 8px rgba(0,0,0,0.35), 0 10px 20px rgba(0,0,0,0.45); --shadow-lg: 0 12px 30px rgba(0,0,0,0.50), 0 24px 50px rgba(0,0,0,0.60); } /* ── GLOBAL APPLICATION (theme-aware) ─────────────────────────────────── */ body { font-family: var(--font-body); background: var(--bg); color: var(--text); transition: background var(--speed) var(--ease), color var(--speed) var(--ease); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); font-weight: 700; letter-spacing: 0.012em; line-height: 1.2; color: var(--text); } a { color: var(--cyan); transition: color var(--speed) var(--ease), text-shadow var(--speed) var(--ease); } a:hover { color: var(--cyan-soft); } [data-theme="dark"] a:hover, body.theme-dark a:hover { text-shadow: var(--glow-cyan); } /* Eyebrow / section-label utility */ .eyebrow { font-family: var(--font-head); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-primary); } /* Selection */ ::selection { background: var(--brand-primary); color: var(--bg); } /* Scrollbar */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--brand-primary); } /* Reduced motion respect */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }