/* ============================================================
   Youth Empowerment School — Typography Tokens

   Font system:
     - Playfair Display : display, hero, scripture pull-quotes
     - Cormorant Garamond : editorial body, sub-headlines
     - Inter           : UI, long-form copy
     - Oswald          : athletic/academic - banner text (uppercase)
     - Caveat          : handwritten warmth ("Say YES")
     - JetBrains Mono  : technical labels
   ============================================================ */

:root {
  --font-display:  "Playfair Display", "Times New Roman", Georgia, serif;
  --font-serif:    "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:     "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-athletic: "Oswald", Impact, "Arial Narrow", sans-serif;
  --font-script:   "Caveat", "Brush Script MT", cursive;
  --font-mono:     "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold:800;
  --weight-black:    900;

  --fs-display-xl: 5rem;
  --fs-display-lg: 3.75rem;
  --fs-h1:         2.75rem;
  --fs-h2:         2rem;
  --fs-h3:         1.5rem;
  --fs-h4:         1.25rem;
  --fs-body-lg:    1.125rem;
  --fs-body:       1rem;
  --fs-body-sm:    0.875rem;
  --fs-label:      0.75rem;

  --lh-tight:   1.05;
  --lh-snug:    1.22;
  --lh-normal:  1.55;
  --lh-relaxed: 1.7;

  --track-tight:  -0.015em;
  --track-normal: 0;
  --track-wide:   0.08em;
  --track-wider:  0.2em;
}

html { font-family: var(--font-body); font-size: 16px; }
body { font-family: var(--font-body); font-weight: var(--weight-regular); line-height: var(--lh-normal); }

@media (max-width: 768px) {
  :root {
    --fs-display-xl: 3.25rem;
    --fs-display-lg: 2.5rem;
    --fs-h1:         2rem;
    --fs-h2:         1.5rem;
    --fs-h3:         1.25rem;
  }
}