/* ============================================================
   Mixto Math — Typography tokens
   Fredoka for the wordmark + headlines (rounded, characterful).
   Nunito for body, dashboards, and numerals (calm, unambiguous,
   dyslexia-friendly — critical for a K–5 math app).
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-display: "Fredoka", "Baloo 2", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Nunito", "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Numerals lean on Nunito's clean, single-story figures. The big
     in-session fact uses display weight for friendly heft. */
  --font-numeric: "Nunito", system-ui, sans-serif;

  /* ---- Weights ---- */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800; /* Nunito only */

  /* ---- Type scale (16px base) ---- */
  --text-fact: 5rem;       /* 80px — the in-session fact, hero numeral */
  --text-display-xl: 3.5rem;  /* 56px — splash / wordmark lockup */
  --text-display-lg: 2.75rem; /* 44px — marketing hero */
  --text-display-md: 2rem;    /* 32px — screen titles */
  --text-title-lg: 1.5rem;    /* 24px — section / card titles */
  --text-title-md: 1.25rem;   /* 20px — sub-titles */
  --text-body-lg: 1.125rem;   /* 18px — lead body, kid-facing copy */
  --text-body: 1rem;          /* 16px — base body */
  --text-body-sm: 0.875rem;   /* 14px — dense dashboard text */
  --text-caption: 0.75rem;    /* 12px — labels, meta (print floor) */

  /* ---- Line heights ---- */
  --leading-tight: 1.05;   /* display + fact */
  --leading-snug: 1.2;     /* headings */
  --leading-normal: 1.45;  /* body */
  --leading-relaxed: 1.6;  /* long-form dashboard prose */

  /* ---- Letter spacing ---- */
  --tracking-tight: -0.02em; /* large Fredoka display */
  --tracking-normal: 0;
  --tracking-wide: 0.04em;   /* small caps labels */
  --tracking-caps: 0.08em;   /* all-caps eyebrows */

  /* ---- Semantic role bundles (font + line-height pairing) ---- */
  --type-wordmark: var(--weight-semibold) var(--text-display-xl) / var(--leading-tight) var(--font-display);
  --type-h1: var(--weight-semibold) var(--text-display-md) / var(--leading-snug) var(--font-display);
  --type-h2: var(--weight-semibold) var(--text-title-lg) / var(--leading-snug) var(--font-display);
  --type-eyebrow: var(--weight-bold) var(--text-caption) / 1 var(--font-body);
}