/* LOOK Curriculum — design tokens. Auto light/dark via prefers-color-scheme, with manual override via . Modern, rounded, fun. */ :root { /* Brand */ --brand: #6c5ce7; /* friendly violet */ --brand-600: #5a4bd6; --brand-700: #4a3cc4; --brand-soft: #eceafd; --accent: #ff7a59; /* warm coral */ --accent-soft: #ffe7df; --mint: #21c7a8; --sky: #3ea8ff; --sun: #ffc542; /* Stage colors (formation framework) */ --stage-preschool: #ff7a59; /* affection */ --stage-early: #3ea8ff; /* agency */ --stage-late: #21c7a8; /* belonging */ /* Light surfaces */ --bg: #f6f7fb; --surface: #ffffff; --surface-2: #f0f1f7; --surface-3: #e7e9f3; --border: #e3e5ef; --border-strong: #d2d5e6; /* Text */ --text: #1c1f2b; --text-2: #5b6072; --text-3: #8a8fa3; --on-brand: #ffffff; /* Feedback */ --danger: #e5484d; --danger-soft: #fde8e8; --ok: #2fa96b; --warn: #e0a300; /* Effects */ --radius: 16px; --radius-sm: 10px; --radius-lg: 24px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(28, 31, 43, 0.06), 0 1px 3px rgba(28, 31, 43, 0.08); --shadow: 0 4px 14px rgba(28, 31, 43, 0.08), 0 2px 6px rgba(28, 31, 43, 0.06); --shadow-lg: 0 18px 50px rgba(28, 31, 43, 0.18); --ring: 0 0 0 3px color-mix(in srgb, var(--brand) 30%, transparent); --header-h: 64px; --maxw: 1180px; --font: -apple-system, "SF Pro Rounded", "SF Pro Text", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color-scheme: light dark; } @media (prefers-color-scheme: dark) { :root { --brand: #8b7bff; --brand-600: #7a6aff; --brand-700: #6957f0; --brand-soft: #262344; --accent: #ff8a6b; --accent-soft: #3a2a26; --bg: #0f1119; --surface: #171a25; --surface-2: #1f2331; --surface-3: #272c3d; --border: #2a2f40; --border-strong: #39405a; --text: #eef0f7; --text-2: #aab0c4; --text-3: #7d839a; --danger-soft: #3a2227; --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow: 0 6px 18px rgba(0,0,0,0.45); --shadow-lg: 0 24px 60px rgba(0,0,0,0.6); } } /* Manual overrides */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; --brand: #8b7bff; --brand-600:#7a6aff; --brand-700:#6957f0; --brand-soft:#262344; --accent:#ff8a6b; --accent-soft:#3a2a26; --bg:#0f1119; --surface:#171a25; --surface-2:#1f2331; --surface-3:#272c3d; --border:#2a2f40; --border-strong:#39405a; --text:#eef0f7; --text-2:#aab0c4; --text-3:#7d839a; --danger-soft:#3a2227; --shadow-sm:0 1px 2px rgba(0,0,0,0.4); --shadow:0 6px 18px rgba(0,0,0,0.45); --shadow-lg:0 24px 60px rgba(0,0,0,0.6); }