/* ================================================================
   TYPE TOKENS
   ================================================================ */
:root {
  --font-display: 'Fredoka', 'Arial Rounded MT Bold', sans-serif;
  --font-body: 'Fredoka', 'Arial Rounded MT Bold', sans-serif;
  --font-hand: 'Caveat', cursive;

  /* Type scale — fluid-ish fixed sizes, tuned for a marketing site */
  --text-display-xl: 500 4.5rem/1.02 var(--font-display);   /* 72px hero */
  --text-display-lg: 500 3.4rem/1.05 var(--font-display);    /* 54px */
  --text-display-md: 500 2.5rem/1.08 var(--font-display);    /* 40px */
  --text-h1: 500 2.25rem/1.15 var(--font-body);              /* 36px */
  --text-h2: 400 1.75rem/1.2 var(--font-body);               /* 28px */
  --text-h3: 400 1.375rem/1.3 var(--font-body);              /* 22px */
  --text-body-lg: 400 1.125rem/1.55 var(--font-body);        /* 18px */
  --text-body: 400 1rem/1.6 var(--font-body);                /* 16px */
  --text-body-sm: 400 0.875rem/1.5 var(--font-body);         /* 14px */
  --text-caption: 500 0.75rem/1.4 var(--font-body);          /* 12px */
  --text-overline: 400 0.75rem/1.2 var(--font-body);         /* 12px, letter-spaced + upper */

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.12em;
}