/* ============================================================================
Vanta AI — Design Tokens
Single source of truth for the visual system. Every screen derives color,
type, spacing, radii, shadow, glow, and motion from these variables — never
ad-hoc values.
Derived from the vanta-design skill (palette, poses, space theme, kids-a11y)
and the emil-design-eng motion philosophy (custom easing, short durations).
TOKENS ONLY — this file defines variables and loads the two brand fonts.
It does not style any element. Import it once, first, in base.html:
(Not yet wired in — pending review.)
============================================================================ */
/* --- Fonts -----------------------------------------------------------------
Baloo 2 = display/headings/numbers (rounded, thick-outline, matches mascot).
Nunito = body (16px min, 18px preferred for lesson copy).
The font files are loaded in base.html via + the
Google Fonts stylesheet (non-render-blocking, unlike an @import here). This
file only declares the font-family tokens below. */
:root {
/* --- Brand core — from the mascot artwork -------------------------------- */
--vanta-purple: #9B5FC9; /* helmet purple — primary brand, buttons, active */
--vanta-purple-deep: #6D3FA0; /* pressed/hover, gradients */
--vanta-plum: #3D2352; /* mascot outline — text on light, borders, dark surfaces */
--vanta-orange: #F0932B; /* face orange — secondary accent, XP/points, focus rings */
--vanta-orange-warm: #E8722A; /* antenna orange — small accents only */
--vanta-teal: #3A9188; /* bodysuit teal — success, progress fills, links */
--vanta-teal-bright: #4EC5D4; /* app-icon teal — gradients, glows */
/* --- Space backgrounds --------------------------------------------------- */
--space-night: #2A1B3D; /* default app background — NOT pure black */
--space-deep: #1E1230; /* elevated dark surfaces, modals */
--space-cloud: #FBF4E4; /* cream card surface on dark */
/* --- Celebration accents — celebration moments ONLY ---------------------- */
--star-gold: #F5C542;
--confetti-red: #E85D6A;
--confetti-blue: #4AA3C7;
/* --- Feedback ------------------------------------------------------------ */
--success: var(--vanta-teal);
--error: #E85D6A; /* friendly red — never harsh */
/* --- The one allowed gradient (app-icon hero moments, used sparingly) ---- */
--gradient-hero: linear-gradient(135deg, var(--vanta-purple), var(--vanta-teal-bright));
/* --- Typography ---------------------------------------------------------- */
--font-display: 'Baloo 2', system-ui, -apple-system, sans-serif; /* headings, numbers */
--font-body: 'Nunito', system-ui, -apple-system, sans-serif; /* body, lesson copy */
/* Type scale (root assumed 16px). Body floor is 16px; 18px preferred. */
--text-xs: 0.875rem; /* 14px — captions / data labels only, never body copy */
--text-sm: 1rem; /* 16px — minimum body size */
--text-base: 1.125rem; /* 18px — preferred body / lesson content */
--text-lg: 1.375rem; /* 22px — subheads */
--text-xl: 1.75rem; /* 28px — section titles */
--text-2xl: 2.25rem; /* 36px — screen titles */
--text-3xl: 3rem; /* 48px — hero / celebration feeling-word */
--weight-regular: 400;
--weight-semibold: 600;
--weight-bold: 700;
--leading-tight: 1.2; /* display headings */
--leading-body: 1.6; /* body — vanta-design requires 1.5+ */
/* --- Spacing — 8px grid -------------------------------------------------- */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.5rem; /* 24px */
--space-6: 2rem; /* 32px */
--space-8: 3rem; /* 48px */
--space-10: 4rem; /* 64px */
/* Kids-a11y: touch targets never below these. */
--touch-min: 44px;
--touch-comfortable: 48px;
/* --- Radii — rounded & friendly, matches the thick-outline mascot -------- */
--radius-sm: 0.5rem; /* 8px — chips, small controls */
--radius-md: 0.75rem; /* 12px — inputs, small cards */
--radius-lg: 1rem; /* 16px — cards */
--radius-xl: 1.5rem; /* 24px — hero cards, modals */
--radius-pill: 999px; /* pills, primary buttons */
/* --- Shadows & glows ----------------------------------------------------
On dark surfaces use SOFT GLOWS, not hard drop shadows. */
--shadow-card: 0 8px 24px rgba(30, 18, 48, 0.35); /* cream card lift on space-night */
--shadow-modal: 0 16px 48px rgba(30, 18, 48, 0.55);
--glow-teal: 0 0 24px rgba(78, 197, 212, 0.35); /* unlocked skill-tree nodes */
--glow-purple: 0 0 24px rgba(155, 95, 201, 0.35); /* active brand elements */
--glow-gold: 0 0 28px rgba(245, 197, 66, 0.45); /* celebration only */
/* Visible keyboard focus — vanta-design requires orange. */
--focus-ring: 0 0 0 3px rgba(240, 147, 43, 0.65);
/* --- Motion (emil-design-eng easing; vanta-design durations) ------------
Custom curves — the built-in CSS easings are too weak.
NEVER use ease-in for UI. Enter/exit = ease-out. */
--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* overshoot ≈ spring, bounce ~0.2 — entrances & playful hovers, never press feedback */
--duration-press: 140ms; /* button :active feedback */
--duration-fast: 180ms; /* micro-interactions */
--duration-base: 220ms; /* dropdowns, node unlocks */
--duration-slow: 300ms; /* upper bound for standard UI */
--duration-celebrate: 800ms; /* level-complete bursts ONLY */
}
/* Respect reduced motion globally: keep opacity/color, drop movement.
(This is the only non-token line — a safety net, not screen styling.) */
@media (prefers-reduced-motion: reduce) {
:root {
--duration-press: 0ms;
--duration-fast: 0ms;
--duration-base: 0ms;
--duration-slow: 0ms;
--duration-celebrate: 0ms;
}
}