/* ============================================================
   TYPOGRAPHY SYSTEM  — Code Wiz
   Rubik ExtraBold        → headlines & CTAs (slightly rounded, tech-forward)
   Plus Jakarta Sans Reg  → body copy (high legibility for young readers)
   Plus Jakarta Sans XBold→ sub-heads, key details, secondary CTAs
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-display: "Rubik", system-ui, sans-serif;      /* headlines / CTAs */
  --font-body:    "Plus Jakarta Sans", system-ui, sans-serif;

  /* ---- Weights ---- */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */
  --fw-extrabold:800; /* @kind font */

  /* ---- Type scale (rem, 16px base) ---- */
  --fs-display-1: 4.5rem;   /* 72px — hero */
  --fs-display-2: 3.5rem;   /* 56px */
  --fs-h1:        2.75rem;  /* 44px */
  --fs-h2:        2.125rem; /* 34px */
  --fs-h3:        1.5rem;   /* 24px */
  --fs-h4:        1.25rem;  /* 20px */
  --fs-lead:      1.25rem;  /* 20px intro paragraph */
  --fs-body:      1rem;     /* 16px */
  --fs-body-sm:   0.875rem; /* 14px */
  --fs-caption:   0.75rem;  /* 12px */

  /* ---- Line heights ---- */
  --lh-tight:   1.05;  /* @kind font */
  --lh-heading: 1.15; /* @kind font */
  --lh-snug:    1.35; /* @kind font */
  --lh-body:    1.6; /* @kind font */

  /* ---- Letter spacing ---- */
  --ls-tight:  -0.02em; /* @kind font */
  --ls-normal: 0; /* @kind font */
  --ls-wide:   0.04em;   /* @kind font */
  --ls-wider:  0.12em; /* @kind font */

  /* ============================================================
     SEMANTIC TYPE ROLES
     ============================================================ */
  --type-display: var(--fw-extrabold) var(--fs-display-1)/var(--lh-tight) var(--font-display);
  --type-h1:      var(--fw-extrabold) var(--fs-h1)/var(--lh-heading) var(--font-display);
  --type-h2:      var(--fw-extrabold) var(--fs-h2)/var(--lh-heading) var(--font-display);
  --type-h3:      var(--fw-bold) var(--fs-h3)/var(--lh-snug) var(--font-display);
  --type-lead:    var(--fw-regular) var(--fs-lead)/var(--lh-body) var(--font-body);
  --type-body:    var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-body);
  --type-body-strong: var(--fw-extrabold) var(--fs-body)/var(--lh-snug) var(--font-body);
  --type-label:   var(--fw-bold) var(--fs-body-sm)/1.2 var(--font-body);
}