/* Design tokens — clean & minimal. Light default; [data-theme="dark"] overrides. The inline script sets data-theme before paint to avoid FOUC. */ :root { /* type */ --font-lao: 'Noto Sans Lao', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'Noto Sans Mono', ui-monospace, 'DejaVu Sans Mono', 'Courier New', monospace; /* Lao reads better a touch larger + airier */ --fs-root: 18px; --lh: 1.7; /* spacing scale */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --radius: 14px; --radius-sm: 9px; --content-max: 74ch; /* light palette */ --bg: #f6f8fb; --surface: #ffffff; --surface-2: #eef2f8; --text: #182031; --muted: #5c6675; --border: #e2e7f0; --primary: #2f6df6; --primary-weak: #e7effe; --primary-contrast: #ffffff; --accent: #7c4dff; --correct: #1a9b5f; --correct-weak: #e2f6ec; --incorrect: #d84b52; --incorrect-weak: #fbe7e8; --focus: #2f6df6; --shadow-1: 0 1px 2px rgba(20,28,46,.06), 0 2px 8px rgba(20,28,46,.06); --shadow-2: 0 6px 24px rgba(20,28,46,.12); --deck-letterbox: #0c1018; } [data-theme="dark"] { --bg: #0e1320; --surface: #161d2c; --surface-2: #1e2740; --text: #e9edf5; --muted: #9aa5b8; --border: #27314a; --primary: #6f9bff; --primary-weak: #1a2540; --primary-contrast: #0b1020; --accent: #a98bff; --correct: #4cc98a; --correct-weak: #14301f; --incorrect: #ef7a80; --incorrect-weak: #3a1c1f; --focus: #6f9bff; --shadow-1: 0 1px 2px rgba(0,0,0,.3), 0 2px 10px rgba(0,0,0,.35); --shadow-2: 0 8px 30px rgba(0,0,0,.5); --deck-letterbox: #05070c; }