/* Youth Oasis — Typography tokens.
   Source of truth: Brand Guidelines Draft 1.1, §1.6 & §4.3.
   Headings: RUBIK (Bold/SemiBold/Regular). Body/UI: OPEN SANS. Fallback: Helvetica/Arial.
   Both are open-licensed Google Fonts — no substitution needed.
   NOTE: the logo's hand-lettered script is ARTWORK, never a typeface. Do not introduce
   any script font to imitate it (§1.1, §1.6). There is intentionally no script token. */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root{
  --font-display:'Rubik','Arial','Helvetica',sans-serif;  /* headings */
  --font-body:'Open Sans','Arial','Helvetica',sans-serif; /* interface & body */
  --font-mono:ui-monospace,'SFMono-Regular','Menlo',monospace;

  /* Type scale — roles from §4.3 */
  --text-2xs:0.6875rem; /* 11 */
  --text-xs:0.75rem;    /* 12 · caption / token metadata */
  --text-sm:0.875rem;   /* 14 · supporting text / button + badge labels */
  --text-base:1rem;     /* 16 · body */
  --text-lg:1.125rem;   /* 18 · card title max */
  --text-xl:1.375rem;   /* 22 */
  --text-2xl:1.75rem;   /* 28 · section title */
  --text-3xl:2.25rem;   /* 36 */
  --text-4xl:3rem;      /* 48 · page title */
  --text-5xl:3.75rem;   /* 60 */

  /* Line height — body ~1.5; headings 1.1–1.3 (§4.3) */
  --leading-tight:1.15;
  --leading-snug:1.25;
  --leading-heading:1.2;
  --leading-normal:1.5;
  --leading-relaxed:1.65;

  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;

  --tracking-tight:-0.005em;
  --tracking-normal:0;
  --tracking-wide:0.02em;
  --tracking-wider:0.08em; /* short uppercase labels only */
}