/* =============================================================
MathGuru — Design tokens
Single source of truth for color, type, spacing, radii, shadows.
Import this stylesheet (or copy the :root block) into any
MathGuru artifact.
============================================================= */
/* ── Webfonts (Google Fonts CDN) ─────────────────────────────── */
/* the four families (Fraunces, Fredoka, Baloo 2, Poppins) are
self-hosted from /static/fonts/ by the page that loads this — the
design's Google Fonts import was removed so the page makes zero
third-party requests. */
:root {
/* ── Surface ──────────────────────────────────────────── */
--mg-navy: #0F1B3A; /* page background */
--mg-navy-deep: #0A1228; /* darker dropshadow / vignette */
--mg-navy-soft: #1A2A57; /* navy panel inside cream card */
--mg-cream: #FAF6E9; /* primary card surface */
--mg-cream-soft: #F2EBD3; /* nested cream chip / pattern banner */
--mg-cream-edge: #E8DFC2; /* card hairline + chunky bottom shadow */
--mg-ink: #1A1E2E; /* primary text on cream */
--mg-ink-soft: #4A526B; /* secondary text */
--mg-ink-mute: #8A8FA3; /* tertiary / label text */
/* ── Rainbow rows — one color per decade 1–100 ────────── */
--mg-row-1: #E04848; /* 1–10 red */
--mg-row-2: #EC7A2C; /* 11–20 orange */
--mg-row-3: #E8B324; /* 21–30 yellow */
--mg-row-4: #4FA85A; /* 31–40 green */
--mg-row-5: #2E8AC9; /* 41–50 blue */
--mg-row-6: #5C5BCB; /* 51–60 indigo */
--mg-row-7: #9148BF; /* 61–70 violet */
--mg-row-8: #C4438A; /* 71–80 pink */
--mg-row-9: #2EA89A; /* 81–90 teal */
--mg-row-10: #B85C2C; /* 91–100 rust */
/* ── Tier accents (progression) ───────────────────────── */
--mg-tier-1: var(--mg-row-1); /* Warm-up */
--mg-tier-2: var(--mg-row-2); /* Growing */
--mg-tier-3: var(--mg-row-3); /* Stretching */
--mg-tier-4: var(--mg-row-4); /* Pushing */
--mg-tier-5: var(--mg-row-5); /* Mastery */
--mg-tier-free: var(--mg-row-6); /* Free Play */
/* ── Semantic ─────────────────────────────────────────── */
--mg-correct: #2FA85F;
--mg-wrong: #D8443A;
--mg-info: #2E8AC9;
/* ── Primary CTA gradient (golden) ────────────────────── */
--mg-cta-from: #FFC73B;
--mg-cta-to: #F08A1E;
--mg-cta-ink: #2A1A05; /* deep brown — text on the gold + 4px chunky shadow */
/* ── Festival accents (Diwali — Light the Garland) ───── */
--mg-festival-marigold: #E87722;
--mg-festival-marigold-deep: #E85C1E;
--mg-festival-gold: #D4A13B;
--mg-festival-gold-deep: #B27D1E;
--mg-festival-tassel: #E84A4A;
/* ── Type families ────────────────────────────────────── */
--mg-font-display: "Fraunces", "Fredoka", "Inter", system-ui, sans-serif;
--mg-font-ui: "Fredoka", "Inter", system-ui, sans-serif;
--mg-font-festival:"Baloo 2", "Fredoka", system-ui, sans-serif;
--mg-font-mono: ui-monospace, "SF Mono", Menlo, monospace;
/* ── Type scale ───────────────────────────────────────── */
--mg-fs-hero: 56px; --mg-lh-hero: 1.05; /* @kind font */ --mg-fw-hero: 700; /* @kind font */
--mg-fs-h1: 44px; --mg-lh-h1: 1.05; /* @kind font */ --mg-fw-h1: 700; /* @kind font */
--mg-fs-h2: 32px; --mg-lh-h2: 1.15; /* @kind font */ --mg-fw-h2: 600; /* @kind font */
--mg-fs-h3: 22px; --mg-lh-h3: 1.25; /* @kind font */ --mg-fw-h3: 600; /* @kind font */
--mg-fs-body: 16px; --mg-lh-body: 1.5; /* @kind font */ --mg-fw-body: 500; /* @kind font */
--mg-fs-small: 13px; --mg-lh-small: 1.4; /* @kind font */
--mg-fs-label: 11px; --mg-lh-label: 1.2; /* @kind font */ /* uppercased, 0.18em tracking */
--mg-fs-numeric: 28px; --mg-lh-numeric: 1.0; /* @kind font */ --mg-fw-numeric: 700; /* @kind font */ /* circles */
/* ── Spacing (4-based scale + 48 / 64 jumps) ──────────── */
--mg-s-1: 4px;
--mg-s-2: 8px;
--mg-s-3: 16px;
--mg-s-4: 24px;
--mg-s-5: 32px;
--mg-s-6: 48px;
--mg-s-7: 64px;
/* ── Radii ────────────────────────────────────────────── */
--mg-r-sm: 8px; /* tiny chips */
--mg-r-md: 14px; /* hud cells, pattern banners */
--mg-r-lg: 22px; /* large inset panels */
--mg-r-xl: 32px; /* the main cream game-card */
--mg-r-pill: 999px;
/* ── Shadows ──────────────────────────────────────────── */
/* Cream game card: chunky 4px under-shadow on cream-edge + soft drop on navy */
--mg-sh-card: 0 4px 0 var(--mg-cream-edge), 0 18px 40px -18px rgba(10, 18, 40, 0.55);
/* Number circle: chunky offset + soft */
--mg-sh-circle: 0 3px 0 rgba(0, 0, 0, 0.10), 0 6px 14px -4px rgba(10, 18, 40, 0.35);
/* Primary CTA button: chunky brown + warm halo */
--mg-sh-button: 0 4px 0 var(--mg-cta-ink), 0 10px 20px -8px rgba(240, 138, 30, 0.6);
/* Modal / overlay drop */
--mg-sh-overlay: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
/* Inset top highlight (used inside number circles + buttons for "rounded plastic" feel) */
--mg-inset-gloss: inset 0 -4px 0 rgba(0, 0, 0, 0.18), inset 0 2px 0 rgba(255, 255, 255, 0.18);
}
/* =============================================================
Base resets + body
============================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
background: var(--mg-navy);
color: var(--mg-ink);
font-family: var(--mg-font-ui);
font-weight: var(--mg-fw-body);
font-size: var(--mg-fs-body);
line-height: var(--mg-lh-body);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* Optional ambient dot-grid texture for navy backgrounds —
add class="mg-dot-grid" to or any container. */
.mg-dot-grid::before {
content: "";
position: fixed; inset: 0;
background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.04) 1px, transparent 0);
background-size: 22px 22px;
pointer-events: none;
z-index: 0;
}
/* =============================================================
Semantic typography helpers
Use these as element classes OR copy the rules onto your own.
============================================================= */
.mg-hero { font-family: var(--mg-font-display); font-weight: var(--mg-fw-hero); font-size: var(--mg-fs-hero); line-height: var(--mg-lh-hero); letter-spacing: -0.02em; }
.mg-h1 { font-family: var(--mg-font-display); font-weight: var(--mg-fw-h1); font-size: var(--mg-fs-h1); line-height: var(--mg-lh-h1); letter-spacing: -0.01em; }
.mg-h2 { font-family: var(--mg-font-display); font-weight: var(--mg-fw-h2); font-size: var(--mg-fs-h2); line-height: var(--mg-lh-h2); }
.mg-h3 { font-family: var(--mg-font-display); font-weight: var(--mg-fw-h3); font-size: var(--mg-fs-h3); line-height: var(--mg-lh-h3); }
.mg-body { font-family: var(--mg-font-ui); font-weight: var(--mg-fw-body); font-size: var(--mg-fs-body); line-height: var(--mg-lh-body); }
.mg-small { font-family: var(--mg-font-ui); font-weight: 500; font-size: var(--mg-fs-small);line-height: var(--mg-lh-small); }
.mg-label { font-family: var(--mg-font-ui); font-weight: 600; font-size: var(--mg-fs-label);line-height: var(--mg-lh-label); letter-spacing: 0.18em; text-transform: uppercase; color: var(--mg-ink-mute); }
.mg-numeric { font-family: var(--mg-font-display); font-weight: var(--mg-fw-numeric); font-size: var(--mg-fs-numeric); line-height: var(--mg-lh-numeric); }
.mg-festival { font-family: var(--mg-font-festival); font-weight: 800; letter-spacing: -0.5px; }
/* The signature italic-accent: wrap a phrase in …
inside a Fraunces display heading to get italic-color emphasis. */
.mg-accent { font-style: italic; color: var(--mg-tier-1); }
/* =============================================================
FAMILY B — Number-sense games
(Sun Number Line, Count the Berries, Count to 100)
Sibling family under the Numbers Games umbrella. Uses a different
navy + 6-hue palette + Fredoka/Poppins (no Fraunces, no Baloo 2)
+ signature rainbow-stroke titles with a navy outline.
The Skip-counting family above is Family A. Don't mix tokens
across families inside the same screen.
============================================================= */
:root {
/* ── Surface ──────────────────────────────────────────── */
--mgb-bg-from: #0F1729;
--mgb-bg-mid: #1A2440;
--mgb-bg-to: #0F1729;
--mgb-bg: linear-gradient(135deg, var(--mgb-bg-from) 0%, var(--mgb-bg-mid) 50%, var(--mgb-bg-to) 100%);
--mgb-navy: #1F2747; /* signature dark — used for stroke + body text + line-art borders */
--mgb-navy-soft: #4B547A; /* secondary text */
--mgb-cream: #FFF6E6; /* warmer than Family A's cream */
--mgb-cream-deep: #FFEFD5; /* nested cream */
--mgb-box-border: rgba(31, 39, 71, 0.28); /* hairline navy used on every container */
/* ── 6-hue palette (replaces Family A's 10-row rainbow) ── */
/* "ChatGPT review: fewer colors = clearer, more memorable" — */
/* per source code comment. The signature device of Family B. */
--mgb-hue-1: #FF6B6B; --mgb-hue-1-dark: #C13D3D; /* red */
--mgb-hue-2: #FFD23F; --mgb-hue-2-dark: #C99B14; /* yellow */
--mgb-hue-3: #4ECDC4; --mgb-hue-3-dark: #2EA399; /* teal */
--mgb-hue-4: #4A90E2; --mgb-hue-4-dark: #2A6BB8; /* blue */
--mgb-hue-5: #9B59B6; --mgb-hue-5-dark: #6E3C84; /* purple */
--mgb-hue-6: #F47286; --mgb-hue-6-dark: #BD3F5A; /* pink */
/* ── Calmer meta UI (HUD, target badge, etc.) ─────────── */
--mgb-meta-indigo: #6E72A0;
--mgb-meta-indigo-soft: #E8E9F3;
--mgb-meta-violet-a: #7E76C9;
--mgb-meta-violet-b: #9A8FE0;
/* ── Play-surface (ten-frame cells, etc.) ─────────────── */
--mgb-play-a: #FFFFFF;
--mgb-play-b: #FFF8E8;
/* "Ghost" / unfilled marker — warm neutral gray that harmonises with cream */
--mgb-ghost-stroke: rgba(74, 70, 60, 0.30);
--mgb-ghost-fill: rgba(74, 70, 60, 0.04);
/* ── Type families ────────────────────────────────────── */
--mgb-font-display: "Fredoka", "Poppins", system-ui, sans-serif;
--mgb-font-ui: "Poppins", system-ui, sans-serif;
}
/* Signature: rainbow-flow text with navy stroke.
Use on big titles (mega-title, target-display, celebration-number).
Count to 100
*/
.mgb-rainbow-text {
background: linear-gradient(90deg, #FF6B6B, #FFC93C, #5DD3A9, #6BB6FF, #A78BFA, #F472B6);
background-size: 300% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-stroke: 2px var(--mgb-navy);
paint-order: stroke fill;
animation: mgb-rainbow-flow 8s linear infinite;
filter: drop-shadow(0 4px 0 rgba(31, 39, 71, 0.15));
}
@keyframes mgb-rainbow-flow {
from { background-position: 0% 50%; }
to { background-position: 300% 50%; }
}