/* themes.css — design tokens only. Colours are raw "R G B" channels so they work both as rgb(var(--x) / a) here and as Tailwind's rgb(var(--x) / ). Swapping [data-theme] on re-skins the entire app. Every theme is light: a pastel ground, near-white cards, Stella's warm brown ink, and one vivid accent. The four dark themes this file used to carry were dropped — this is a children's app, and a navy or aubergine screen reads as a different product next to the character art. Shared across all themes (declared once on :root): --border hairline colour, always used at a low alpha --glass-a card opacity — near-solid on every light ground --metro-* the pendulum instrument, traced from the character art --logo-filter wordmark halo; unnecessary now that no ground is dark */ :root { --text: 58 42 26; /* #3A2A1A — Stella's shell brown */ --text-dim: 107 74 47; /* #6B4A2F — wood */ --text-muted: 152 124 100; --bright: 44 31 18; --on-accent: 255 255 255; --star: 255 210 77; --good: 46 178 128; --error: 232 90 96; --glass: 255 255 255; --border: 107 74 47; /* warm wood hairlines */ --glass-a: 0.92; --shadow-a: 0.14; --font-display: 'Jua', 'Space Grotesk', sans-serif; --font-body: 'Jua', 'Inter', sans-serif; /* The pendulum instrument. Fixed rather than theme-derived: it is a brand object, like the logo, and should read the same on every ground. */ --metro-shell: 58 42 26; /* case */ --metro-face: 250 235 208; /* cream panel, lit edge */ --metro-face-deep: 236 214 178; --metro-strip: 74 52 33; /* centre scale channel */ --metro-base: 173 104 52; /* wood */ --metro-base-lit: 201 133 76; --metro-base-deep: 124 71 33; --metro-rod: 196 198 201; /* steel */ --metro-rod-lit: 232 234 236; --metro-rod-deep: 150 153 158; --metro-weight: 236 214 178; --logo-filter: none; } /* Sunny is the default, so it also answers to bare :root — the app still has a full palette even if the [data-theme] attribute is missing for any reason. Its values are Stella's own character-sheet colours. */ :root, html[data-theme='kids'] { --bg: 255 210 77; /* #FFD24D star yellow */ --surface-1: 255 243 230; /* #FFF3E6 cream */ --surface-2: 255 255 255; /* white cards */ --surface-3: 253 229 178; --surface-4: 255 222 150; --accent: 255 143 174; /* #FF8FAE Stella pink */ --outline: 226 190 110; } html[data-theme='aqua'] { /* Mint */ --bg: 165 227 216; --surface-1: 240 252 249; --surface-2: 255 255 255; --surface-3: 209 240 233; --surface-4: 186 232 222; --accent: 255 127 107; /* coral */ --outline: 150 205 195; } html[data-theme='rose'] { /* Bubblegum */ --bg: 255 194 212; --surface-1: 255 244 248; --surface-2: 255 255 255; --surface-3: 255 220 231; --surface-4: 255 207 222; --accent: 168 139 255; /* grape */ --outline: 232 172 194; } html[data-theme='lavender'] { --bg: 213 199 255; --surface-1: 247 244 255; --surface-2: 255 255 255; --surface-3: 229 221 255; --surface-4: 219 208 255; --accent: 255 127 168; /* pink */ --outline: 190 176 236; } html[data-theme='peach'] { --bg: 255 201 168; --surface-1: 255 246 239; --surface-2: 255 255 255; --surface-3: 255 226 208; --surface-4: 255 214 189; --accent: 63 184 166; /* teal */ --outline: 232 186 154; }