/* ============================================================
   DP TRAINING — TYPOGRAPHY TOKENS
   Display: Saira Condensed — tall, narrow, aggressive. Stands in
   for the custom chrome logotype; always uppercase for headlines.
   Body / UI: Saira — the matching normal-width family. Cohesive,
   modern, neutral.
   NOTE: webfonts are loaded in fonts.css.
   ============================================================ */

:root {
  /* Families */
  --font-display: "Saira Condensed", "Oswald", "Arial Narrow", sans-serif;
  --font-sans:    "Saira", "Helvetica Neue", Arial, sans-serif;
  --font-body:    var(--font-sans);
  --font-mono:    "Saira Semi Condensed", ui-monospace, "SFMono-Regular", monospace;

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

  /* ---- Type scale (px @ 16 base) -------------------------- */
  --text-2xs:  11px;
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  48px;
  --text-5xl:  64px;
  --text-6xl:  84px;
  --text-7xl:  112px;

  /* Line heights */
  --leading-none:    1;   /* @kind other */
  --leading-tight:   1.08; /* @kind other */
  --leading-snug:    1.22; /* @kind other */
  --leading-normal:  1.5;  /* @kind other */
  --leading-relaxed: 1.65; /* @kind other */

  /* Letter spacing — display runs TIGHT, labels run WIDE */
  --tracking-tighter: -0.02em;
  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;
  --tracking-widest:  0.16em;   /* eyebrow / kicker labels */

  /* ---- Semantic roles ------------------------------------- */
  --display-family:  var(--font-display);
  --display-weight:  var(--fw-black);
  --display-tracking: var(--tracking-tight);
  --display-leading:  var(--leading-tight);
  --display-transform: uppercase; /* @kind other */

  --heading-family:  var(--font-display);
  --heading-weight:  var(--fw-bold);

  --eyebrow-family:  var(--font-sans);
  --eyebrow-weight:  var(--fw-bold);
  --eyebrow-tracking: var(--tracking-widest);
  --eyebrow-transform: uppercase; /* @kind other */
  --eyebrow-size:    var(--text-sm);

  --body-family:  var(--font-body);
  --body-weight:  var(--fw-regular);
  --body-size:    var(--text-base);
  --body-leading: var(--leading-relaxed);

  --label-family:  var(--font-sans);
  --label-weight:  var(--fw-semibold);
  --label-tracking: var(--tracking-wide);
}