/* ============================================================
   Times20 — Typography tokens
   Display: "New Black" — geometric grotesque, set TIGHT with
   negative tracking for headlines and big numerals.
   Text/UI: "Poppins" — even, geometric, friendly for body & UI.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-display: "New Black", "Poppins", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Poppins", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---- Weights ---- */
  --fw-extralight: 200; /* @kind font */
  --fw-light:      300; /* @kind font */
  --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 (1.250 major-third-ish, tuned) ---- */
  --fs-2xs:  0.6875rem;  /* 11px — micro labels */
  --fs-xs:   0.75rem;    /* 12px */
  --fs-sm:   0.875rem;   /* 14px */
  --fs-base: 1rem;       /* 16px */
  --fs-md:   1.125rem;   /* 18px */
  --fs-lg:   1.375rem;   /* 22px */
  --fs-xl:   1.75rem;    /* 28px */
  --fs-2xl:  2.25rem;    /* 36px */
  --fs-3xl:  3rem;       /* 48px */
  --fs-4xl:  4rem;       /* 64px */
  --fs-5xl:  5.5rem;     /* 88px */
  --fs-6xl:  7.5rem;     /* 120px — hero display */

  /* ---- Line heights ---- */
  --lh-none:    1;      /* @kind font */
  --lh-tight:   1.12;   /* @kind font */
  --lh-snug:    1.2;    /* @kind font */
  --lh-normal:  1.5;    /* @kind font */
  --lh-relaxed: 1.7;    /* @kind font */

  /* ---- Letter spacing ---- */
  --ls-tighter: -0.04em; /* big display @kind font */
  --ls-tight:   -0.02em; /* headings @kind font */
  --ls-normal:  0em;     /* @kind font */
  --ls-wide:    0.02em;  /* @kind font */
  --ls-wider:   0.08em;  /* eyebrows / overlines, uppercase @kind font */
  --ls-widest:  0.16em;  /* @kind font */

  /* ============================================================
     Semantic text roles (shorthands for font/size/weight/lh/ls)
     Use via: font: var(--type-...) — or the individual axes.
     ============================================================ */

  /* Display — New Black, extrabold, very tight */
  --type-display-1: var(--fw-extrabold) var(--fs-6xl)/var(--lh-tight) var(--font-display); /* @kind font */
  --type-display-2: var(--fw-bold)      var(--fs-5xl)/var(--lh-tight) var(--font-display); /* @kind font */
  --type-display-3: var(--fw-bold)      var(--fs-4xl)/var(--lh-tight) var(--font-display); /* @kind font */

  /* Headings — spec §5.3: H1/H2 = New Black Bold; H3/H4 = Poppins SemiBold */
  --type-h1: var(--fw-bold)     4.5rem/1.12 var(--font-display);   /* 72px New Black @kind font */
  --type-h2: var(--fw-bold)     var(--fs-3xl)/1.18 var(--font-display); /* 48px New Black @kind font */
  --type-h3: var(--fw-semibold) 2rem/1.3 var(--font-body);         /* 32px Poppins @kind font */
  --type-h4: var(--fw-semibold) var(--fs-lg)/1.3 var(--font-body); /* 22px Poppins @kind font */

  /* Body — Poppins Regular · spec §5.3 body 16–18px, line height 1.5–1.6 */
  --type-body-lg: var(--fw-regular) var(--fs-md)/1.55 var(--font-body);  /* 18px @kind font */
  --type-body:    var(--fw-regular) var(--fs-base)/1.55 var(--font-body); /* 16px @kind font */
  --type-body-sm: var(--fw-regular) var(--fs-sm)/1.5 var(--font-body); /* 14px @kind font */

  /* UI labels — Poppins, medium */
  --type-label:    var(--fw-medium) var(--fs-sm)/var(--lh-snug) var(--font-body); /* @kind font */
  --type-label-sm: var(--fw-medium) var(--fs-xs)/var(--lh-snug) var(--font-body); /* @kind font */

  /* Eyebrow / overline — uppercase, wide tracking */
  --type-eyebrow: var(--fw-semibold) var(--fs-xs)/var(--lh-snug) var(--font-body); /* @kind font */
}