/* ============================================================
   GOPHY — Typography  (authoritative: design-tokens.json)
   Two voices, no serif, ever:
     • Waiting for the Sunrise → ALL headings, labels, CTA text.
       Warm, hand-written, all-caps friendly.
     • system-ui → body copy, inputs, captions. Quiet & legible.
   The handwriting face carries personality; the body face carries
   information. Never set body paragraphs in the handwriting font.
   ============================================================ */

:root {
  --font-hand: 'Waiting for the Sunrise', 'Comic Sans MS', cursive; /* display / labels / CTA */
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* body / inputs */

  /* ---- Type scale (mobile-first, rem on a 16px root) ---- */
  --text-xs:   0.75rem;   /* 12 — captions, timestamps */
  --text-sm:   0.875rem;  /* 14 — secondary body, input help */
  --text-base: 1rem;      /* 16 — body copy */
  --text-lg:   1.125rem;  /* 18 — list titles, card labels */
  --text-xl:   1.375rem;  /* 22 — section headings */
  --text-2xl:  1.75rem;   /* 28 — screen titles */
  --text-3xl:  2.25rem;   /* 36 — hero / celebration */

  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.55;  /* body */

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;
}

/* ---- Role classes ---- */
.gophy-hero     { font-family: var(--font-hand); font-size: var(--text-3xl); line-height: var(--leading-tight); color: var(--text-body); }
.gophy-title    { font-family: var(--font-hand); font-size: var(--text-2xl); line-height: var(--leading-tight); color: var(--text-body); }
.gophy-heading  { font-family: var(--font-hand); font-size: var(--text-xl);  line-height: var(--leading-snug);  color: var(--text-body); }
.gophy-label    { font-family: var(--font-hand); font-size: var(--text-lg);  line-height: var(--leading-snug);  color: var(--text-body); }
.gophy-body     { font-family: var(--font-body); font-size: var(--text-base);line-height: var(--leading-normal); color: var(--text-body); }
.gophy-caption  { font-family: var(--font-body); font-size: var(--text-sm);  line-height: var(--leading-normal); color: var(--text-muted); }
.gophy-cta      { font-family: var(--font-hand); font-size: var(--text-lg);  line-height: 1; }