/* ========================================================== theme.css — design tokens for Learnillion Single source of truth for colors, type, geometry, motion. Override at any scope to retheme. ========================================================== */ :root { /* ---------- Brand ---------- */ --brand-sun: #FFCD3A; --brand-sun-dark: #E8A92F; --brand-coral: #FF6B6B; --brand-pink: #FF8FB1; --brand-teal: #1FB5A8; --brand-teal-dark: #0E8B80; --brand-purple: #7B6CD9; --brand-mint: #6FE0B8; /* ---------- World / background ---------- */ --sky-top: #B8E5FF; --sky-mid: #D9F0FF; --sky-bottom: #FFEDD5; --cloud: #FFFFFF; /* ---------- Surfaces ---------- */ --paper: #FFFFFF; --paper-warm: #FFFAEC; --paper-cool: #F4F8FF; /* ---------- Ink ---------- */ --ink: #1F1A3D; --ink-soft: #4A4368; --ink-muted: #8A85A8; /* ---------- Subject palettes (gradients) ---------- */ --subj-maths: linear-gradient(135deg, #FFCD3A 0%, #FF8B3A 100%); --subj-english: linear-gradient(135deg, #FF8FB1 0%, #C76FE0 100%); --subj-science: linear-gradient(135deg, #6FE0B8 0%, #1FB5A8 100%); --subj-default: linear-gradient(135deg, #FFCD3A 0%, #E8A92F 100%); /* ---------- Typography ---------- */ --font-body: 'Fredoka', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --font-display: 'Bagel Fat One', var(--font-body); /* Type scale */ --fs-xs: 12px; --fs-sm: 14px; --fs-md: 16px; --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 28px; --fs-3xl: 36px; /* ---------- Geometry ---------- */ --radius-sm: 12px; --radius-md: 18px; --radius-lg: 28px; --radius-xl: 36px; --radius-pill: 999px; /* Borders */ --border-w: 2px; --border-w-thick: 3px; /* ---------- Shadows ---------- */ /* Soft layered (default for surfaces) */ --shadow-soft: 0 2px 6px rgba(31, 26, 61, 0.06), 0 8px 20px rgba(31, 26, 61, 0.08); --shadow-card: 0 4px 8px rgba(31, 26, 61, 0.06), 0 12px 28px rgba(31, 26, 61, 0.12); --shadow-pop: 0 8px 16px rgba(31, 26, 61, 0.10), 0 20px 40px rgba(31, 26, 61, 0.18); /* Stamp (for buttons & special accents only — restraint) */ --shadow-stamp: 0 4px 0 var(--ink); --shadow-stamp-sm: 0 2px 0 var(--ink); /* ---------- Spacing ---------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; /* Aliases for legacy refs */ --space-1: var(--s-1); --space-2: var(--s-2); --space-3: var(--s-3); --space-4: var(--s-4); --space-5: var(--s-5); --space-6: var(--s-6); /* ---------- Motion ---------- */ --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* ---------- Bobo theme defaults (used by bobo.js) ---------- */ --bobo-fur: #FFCD3A; --bobo-fur-dark: #D89417; --bobo-fur-light: #FFE89A; --bobo-ink: #2B2356; --bobo-tongue: #FF8FB1; --bobo-blush: #FF8FB1; /* ---------- Backwards-compat aliases (so older files still work) ---------- */ --color-paper: var(--paper); --color-bg: var(--paper); --color-bg-1: var(--paper-warm); --color-bg-2: var(--paper-cool); --color-ink: var(--ink); --color-muted: var(--ink-muted); --color-primary: var(--brand-teal); --color-primary-dk: var(--brand-teal-dark); --color-coral: var(--brand-coral); --color-pink: var(--brand-pink); --color-purple: var(--brand-purple); --color-accent: var(--brand-sun); --color-shadow-stamp: var(--shadow-stamp); --shadow-stamp-lg: var(--shadow-pop); } /* Example alternate theme — toggle by adding class to */ .theme-night { --paper: #1B1837; --paper-warm:#2A2649; --paper-cool:#252247; --ink: #F2EFFF; --ink-soft: #C8C2E8; --ink-muted: #9088B8; --sky-top: #0B0F2E; --sky-mid: #161A40; --sky-bottom:#2A2649; }