/* theladder-v0.2.0 | 2026-06-10 Aesop AI Academy — The Ladder brand system. Source of truth: design-handoff-ladder/BRAND_GUIDE.md 4 themes x 2 modes, switched via data-theme / data-mode on . All colors live HERE as tokens — components reference var(--token) only. */ /* ============================================================ 1. TOKENS — 8 palettes (BRAND_GUIDE §3–4, exact hex) ============================================================ */ :root { /* Theme-switcher swatch constants (theme colors shown while another theme is active — the only place these may appear outside palettes) */ --swatch-indigo: #4B40C9; --swatch-indigo-2: #E8843C; --swatch-emerald: #0E9E6E; --swatch-emerald-2: #E0A129; --swatch-spring: #0A9E7C; --swatch-spring-2: #E6B92F; --swatch-volt: #AEF24E; --swatch-volt-2: #131A13; --font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-schibsted: 'Schibsted Grotesk', sans-serif; --font-bricolage: 'Bricolage Grotesque', sans-serif; --font-space: 'Space Grotesk', sans-serif; --ease: cubic-bezier(.16, 1, .3, 1); } /* indigo — "Focus" (default; also the no-attribute fallback) */ :root, [data-theme="indigo"][data-mode="light"] { --bg: #F6F5F1; --bg2: #EFEDE6; --surface: #FFFFFF; --surface2: #F1EFEA; --ink: #1A1830; --muted: #6A6880; --faint: #A8A6B6; --primary: #4B40C9; --primary2: #3A30A8; --on-primary: #FFFFFF; --accent: #E8843C; --accent-ink: #9A5012; --fill: #4B40C9; --border: #E0DDD2; --hair: #D8D5C9; --ring: rgba(75, 64, 201, .12); --font-display: 'Schibsted Grotesk', sans-serif; } [data-theme="indigo"][data-mode="dark"] { --bg: #121022; --bg2: #0C0B18; --surface: #1A1830; --surface2: #221F3C; --ink: #EEEDF7; --muted: #A6A3C0; --faint: #615E80; --primary: #8579F2; --primary2: #9A90F5; --on-primary: #121022; --accent: #E8843C; --accent-ink: #E8843C; --fill: #8579F2; --border: #2A2748; --hair: #262343; --ring: rgba(133, 121, 242, .18); --font-display: 'Schibsted Grotesk', sans-serif; } /* emerald — "Scholar" */ [data-theme="emerald"][data-mode="light"] { --bg: #F2F5F1; --bg2: #E7EEE8; --surface: #FFFFFF; --surface2: #EDF2EC; --ink: #0F1F1A; --muted: #516259; --faint: #9AAAA0; --primary: #0E9E6E; --primary2: #0B855D; --on-primary: #FFFFFF; --accent: #E0A129; --accent-ink: #6F5300; --fill: #0E9E6E; --border: #DBE4DC; --hair: #D2DDD3; --ring: rgba(14, 158, 110, .12); --font-display: 'Schibsted Grotesk', sans-serif; } [data-theme="emerald"][data-mode="dark"] { --bg: #0B1613; --bg2: #08110E; --surface: #11201A; --surface2: #16281F; --ink: #E8F2EC; --muted: #9BB3A9; --faint: #5E7770; --primary: #2BD49A; --primary2: #37E0A6; --on-primary: #08130F; --accent: #E0A129; --accent-ink: #E0A129; --fill: #2BD49A; --border: #1F332B; --hair: #1B2D26; --ring: rgba(43, 212, 154, .18); --font-display: 'Schibsted Grotesk', sans-serif; } /* spring — "Explorer" */ [data-theme="spring"][data-mode="light"] { --bg: #F1F6F4; --bg2: #E4EFEA; --surface: #FFFFFF; --surface2: #E9F3EF; --ink: #0E211D; --muted: #4D635C; --faint: #92A39B; --primary: #0A9E7C; --primary2: #088068; --on-primary: #FFFFFF; --accent: #E6B92F; --accent-ink: #6F5600; --fill: #0A9E7C; --border: #D6E4DF; --hair: #CDDCD6; --ring: rgba(10, 158, 124, .12); --font-display: 'Bricolage Grotesque', sans-serif; } [data-theme="spring"][data-mode="dark"] { --bg: #091613; --bg2: #06110E; --surface: #0F201C; --surface2: #153029; --ink: #E6F4EF; --muted: #9EC2B8; --faint: #5D7C72; --primary: #1FD6A6; --primary2: #2EE0B2; --on-primary: #06140F; --accent: #E6B92F; --accent-ink: #E6B92F; --fill: #1FD6A6; --border: #1B322C; --hair: #172B26; --ring: rgba(31, 214, 166, .18); --font-display: 'Bricolage Grotesque', sans-serif; } /* volt — "Arcade" (light mode: ink buttons with neon text; --fill stays readable green) */ [data-theme="volt"][data-mode="light"] { --bg: #F4F6F0; --bg2: #E9EEDF; --surface: #FFFFFF; --surface2: #EEF3E6; --ink: #131A11; --muted: #5B6B54; --faint: #97A38C; --primary: #171D14; --primary2: #000000; --on-primary: #AEF24E; --accent: #5F9C0A; --accent-ink: #3F6B00; --fill: #5F9C0A; --border: #DCE3D2; --hair: #D3DCC8; --ring: rgba(120, 180, 40, .16); --font-display: 'Space Grotesk', sans-serif; } [data-theme="volt"][data-mode="dark"] { --bg: #0D130E; --bg2: #090D0A; --surface: #131A13; --surface2: #19211A; --ink: #E9F2E7; --muted: #9AAB97; --faint: #67755F; --primary: #AEF24E; --primary2: #BCF563; --on-primary: #0D130E; --accent: #AEF24E; --accent-ink: #AEF24E; --fill: #AEF24E; --border: #222C22; --hair: #1D261D; --ring: rgba(174, 242, 78, .18); --font-display: 'Space Grotesk', sans-serif; } /* ============================================================ 2. BASE ============================================================ */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } [hidden] { display: none !important; } html { transition: background-color .4s ease, color .4s ease; } body { background: var(--bg); color: var(--ink); font-family: var(--font-body); -webkit-font-smoothing: antialiased; transition: background-color .4s ease, color .4s ease; } ::selection { background: var(--ring); } a { text-decoration: none; color: inherit; } a, button { transition: background-color .22s ease, color .22s ease, border-color .22s ease, transform .22s ease, opacity .22s ease; } button, input, textarea, select { font: inherit; border-radius: 0; } /* Default button voice — moved app code emits bare