/* ===========================================================================
   The Attention Experiment — Typography scale
   Display: Baga (Fredoka fallback). Body: Nunito Sans.
   Soft, friendly, generous. Headings lean on the display face + weight 600/700.
   =========================================================================== */
:root {
  /* Family aliases (see fonts.css) */
  --font-display: 'baga', 'Fredoka', 'Nunito Sans', system-ui, sans-serif;
  --font-body: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

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

  /* Type scale (1.250 major-third-ish, tuned) */
  --fs-display-xl: 4.5rem;   /* 72 — hero                 */
  --fs-display-l:  3.5rem;   /* 56 — page hero            */
  --fs-display-m:  2.75rem;  /* 44 — section opener       */
  --fs-h1: 2.25rem;          /* 36                        */
  --fs-h2: 1.75rem;          /* 28                        */
  --fs-h3: 1.375rem;         /* 22                        */
  --fs-h4: 1.125rem;         /* 18                        */
  --fs-body-lg: 1.1875rem;   /* 19 — lead paragraph       */
  --fs-body: 1rem;           /* 16 — base                 */
  --fs-body-sm: 0.875rem;    /* 14                        */
  --fs-caption: 0.75rem;     /* 12                        */
  --fs-overline: 0.6875rem;  /* 11 — eyebrows/labels      */

  /* Line heights */
  --lh-tight: 1.05;    /* @kind other */
  --lh-display: 1.12;  /* @kind other */
  --lh-heading: 1.2;   /* @kind other */
  --lh-snug: 1.4;      /* @kind other */
  --lh-body: 1.6;      /* @kind other */

  /* Letter spacing */
  --ls-display: -0.01em;  /* @kind other */
  --ls-tight: -0.005em;   /* @kind other */
  --ls-normal: 0;         /* @kind other */
  --ls-overline: 0.14em;  /* @kind other */
  --ls-caps: 0.06em;      /* @kind other */

  /* Semantic text roles */
  --text-display: var(--fw-bold) var(--fs-display-l)/var(--lh-display) var(--font-display);
  --text-heading: var(--fw-semibold) var(--fs-h2)/var(--lh-heading) var(--font-display);
}