/* ============================================================
   CHEER DESIGN — Typography tokens
   ------------------------------------------------------------
   One family does everything: CAUSTEN — self-hosted (see
   tokens/fonts.css), full Thin→Black weight range.
   Geometric, round, friendly. Lean on weight + size for
   hierarchy, not on a second typeface. Display sizes run BOLD
   to BLACK and tight; body sits at Regular/Medium.

   Brand quirk: the wordmark uses a DOTLESS "ı". That is a
   logo treatment — do not strip dots from body copy.
   ============================================================ */

:root {
  /* ---- Families ----
     Causten — self-hosted (see tokens/fonts.css), full Thin→Black. */
  --font-display: 'Causten', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body:    'Causten', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---- Weights (Causten ships Thin→Black; we use a focused set) ---- */
  --weight-light:     300;
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;
  --weight-black:     900;

  /* ---- Type scale (rem, 16px base) ---- */
  --text-3xs: 0.6875rem;  /* 11 — micro labels        */
  --text-2xs: 0.75rem;    /* 12 — captions            */
  --text-xs:  0.8125rem;  /* 13 — meta                */
  --text-sm:  0.875rem;   /* 14 — secondary body      */
  --text-md:  1rem;       /* 16 — body                */
  --text-lg:  1.125rem;   /* 18 — lead                */
  --text-xl:  1.375rem;   /* 22 — subheading          */
  --text-2xl: 1.75rem;    /* 28 — heading             */
  --text-3xl: 2.25rem;    /* 36 — section title       */
  --text-4xl: 3rem;       /* 48 — display             */
  --text-5xl: 4rem;       /* 64 — hero                */
  --text-6xl: 5.5rem;     /* 88 — poster              */

  /* ---- Line heights ---- */
  --leading-tight:  1.04;  /* display / poster        */
  --leading-snug:   1.18;  /* headings                */
  --leading-normal: 1.5;   /* body                    */
  --leading-relaxed:1.65;  /* long-form               */

  /* ---- Letter spacing ---- */
  --tracking-tighter: -0.03em; /* big display          */
  --tracking-tight:   -0.015em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.12em;  /* UPPERCASE tagline / eyebrows */

  /* ---- Semantic roles ---- */
  --font-eyebrow-weight: var(--weight-semibold);
  --font-eyebrow-track:  var(--tracking-wider);
}

/* Optional helper classes — handy in specimen cards & mocks. */
.cheer-display {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
}
.cheer-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--font-eyebrow-weight);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}