/* ========================================================== theme.css — design tokens Change values here to retheme the platform. Every component in app.css references these variables. ========================================================== */ :root { /* ---------- Brand palette ---------- */ --color-bg-1: #C8E8FF; /* page gradient top */ --color-bg-2: #E0F4D6; /* page gradient mid */ --color-bg-3: #FFE0B5; /* page gradient bottom */ --color-ink: #2B2356; /* near-black for borders + text */ --color-paper: #FFFFFF; /* card background */ --color-primary: #7DD46B; /* main CTA */ --color-primary-dk: #3FA84F; --color-secondary: #4ECDC4; --color-accent: #FFD23F; --color-coral: #FF6B6B; --color-pink: #FF8FB1; --color-purple: #A06CD5; --color-muted: #6B6890; --color-soft: #FFF6CC; /* highlight blocks */ /* ---------- Typography ---------- */ --font-body: 'Fredoka', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --font-display: 'Bagel Fat One', var(--font-body); --fs-xs: 12px; --fs-sm: 14px; --fs-md: 16px; --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 28px; --fs-3xl: 36px; /* ---------- Geometry ---------- */ --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-pill: 999px; --border-w: 3px; --border-w-thick: 4px; --shadow-stamp: 0 4px 0 var(--color-ink); --shadow-stamp-lg:0 6px 0 var(--color-ink); --shadow-soft: 0 3px 12px rgba(0,0,0,0.08); /* ---------- Spacing scale ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; /* ---------- Layout ---------- */ --topbar-h: 60px; --max-content: 1100px; } /* ---------- Optional dark / alt themes ---------- Add a class on to switch: ... */ .theme-night { --color-bg-1: #1B1A2E; --color-bg-2: #2A2845; --color-bg-3: #3B3160; --color-ink: #F2EFFF; --color-paper: #2E2A4A; --color-muted: #B8B4D6; --color-soft: #3C3760; }