/* ============================================================
   TYPOGRAPHY
   Two faces only: Display (>=19px headlines) and Text (UI/body).
   Negative letter-spacing at display sizes = the "Apple tight" cadence.
   Weight ladder is 300 / 400 / 600 / 700 — weight 500 is deliberately ABSENT.
   Body runs at 17px (not 16px). Each role is one custom property bundle
   plus convenience .type-* utility classes.
   ============================================================ */
:root {
  --font-display: var(--font-display); /* defined in fonts.css */

  /* Role: size / weight / line-height / letter-spacing / family */

  /* hero-display — the one signature headline */
  --t-hero-size: 56px;   --t-hero-weight: 600; /* @kind other */ --t-hero-lh: 1.07; /* @kind other */ --t-hero-ls: -0.28px;
  /* display-lg — tile headlines */
  --t-dlg-size: 40px;    --t-dlg-weight: 600; /* @kind other */ --t-dlg-lh: 1.10; /* @kind other */ --t-dlg-ls: 0px;
  /* display-md — section heads */
  --t-dmd-size: 34px;    --t-dmd-weight: 600; /* @kind other */ --t-dmd-lh: 1.47; /* @kind other */ --t-dmd-ls: -0.374px;
  /* lead — product tile subcopy */
  --t-lead-size: 28px;   --t-lead-weight: 400; /* @kind other */ --t-lead-lh: 1.14; /* @kind other */ --t-lead-ls: 0.196px;
  /* lead-airy — rare weight 300 lead paragraphs */
  --t-airy-size: 24px;   --t-airy-weight: 300; /* @kind other */ --t-airy-lh: 1.5; /* @kind other */ --t-airy-ls: 0px;
  /* tagline — sub-tile / sub-nav category */
  --t-tag-size: 21px;    --t-tag-weight: 600; /* @kind other */ --t-tag-lh: 1.19; /* @kind other */ --t-tag-ls: 0.231px;
  /* body-strong */
  --t-bodys-size: 17px;  --t-bodys-weight: 600; /* @kind other */ --t-bodys-lh: 1.24; /* @kind other */ --t-bodys-ls: -0.374px;
  /* body — default paragraph */
  --t-body-size: 17px;   --t-body-weight: 400; /* @kind other */ --t-body-lh: 1.47; /* @kind other */ --t-body-ls: -0.374px;
  /* dense-link — footer / store link stacks (relaxed leading) */
  --t-dense-size: 17px;  --t-dense-weight: 400; /* @kind other */ --t-dense-lh: 2.41; /* @kind other */ --t-dense-ls: 0px;
  /* caption */
  --t-cap-size: 14px;    --t-cap-weight: 400; /* @kind other */ --t-cap-lh: 1.43; /* @kind other */ --t-cap-ls: -0.224px;
  /* caption-strong */
  --t-caps-size: 14px;   --t-caps-weight: 600; /* @kind other */ --t-caps-lh: 1.29; /* @kind other */ --t-caps-ls: -0.224px;
  /* button-large — rare weight 300 store CTA */
  --t-btnl-size: 18px;   --t-btnl-weight: 300; /* @kind other */ --t-btnl-lh: 1.0; /* @kind other */ --t-btnl-ls: 0px;
  /* button-utility / nav */
  --t-btnu-size: 14px;   --t-btnu-weight: 400; /* @kind other */ --t-btnu-lh: 1.29; /* @kind other */ --t-btnu-ls: -0.224px;
  /* fine-print */
  --t-fine-size: 12px;   --t-fine-weight: 400; /* @kind other */ --t-fine-lh: 1.0; /* @kind other */ --t-fine-ls: -0.12px;
  /* micro-legal */
  --t-micro-size: 10px;  --t-micro-weight: 400; /* @kind other */ --t-micro-lh: 1.3; /* @kind other */ --t-micro-ls: -0.08px;
  /* nav-link */
  --t-nav-size: 12px;    --t-nav-weight: 400; /* @kind other */ --t-nav-lh: 1.0; /* @kind other */ --t-nav-ls: -0.12px;
}

/* ---------- utility classes ---------- */
.type-hero    { font-family: var(--font-display); font-size: var(--t-hero-size);  font-weight: var(--t-hero-weight);  line-height: var(--t-hero-lh);  letter-spacing: var(--t-hero-ls); }
.type-display-lg { font-family: var(--font-display); font-size: var(--t-dlg-size); font-weight: var(--t-dlg-weight); line-height: var(--t-dlg-lh); letter-spacing: var(--t-dlg-ls); }
.type-display-md { font-family: var(--font-text); font-size: var(--t-dmd-size); font-weight: var(--t-dmd-weight); line-height: var(--t-dmd-lh); letter-spacing: var(--t-dmd-ls); }
.type-lead    { font-family: var(--font-display); font-size: var(--t-lead-size);  font-weight: var(--t-lead-weight);  line-height: var(--t-lead-lh);  letter-spacing: var(--t-lead-ls); }
.type-lead-airy { font-family: var(--font-text); font-size: var(--t-airy-size); font-weight: var(--t-airy-weight); line-height: var(--t-airy-lh); letter-spacing: var(--t-airy-ls); }
.type-tagline { font-family: var(--font-display); font-size: var(--t-tag-size);   font-weight: var(--t-tag-weight);   line-height: var(--t-tag-lh);   letter-spacing: var(--t-tag-ls); }
.type-body-strong { font-family: var(--font-text); font-size: var(--t-bodys-size); font-weight: var(--t-bodys-weight); line-height: var(--t-bodys-lh); letter-spacing: var(--t-bodys-ls); }
.type-body    { font-family: var(--font-text); font-size: var(--t-body-size);     font-weight: var(--t-body-weight);  line-height: var(--t-body-lh);  letter-spacing: var(--t-body-ls); }
.type-dense-link { font-family: var(--font-text); font-size: var(--t-dense-size); font-weight: var(--t-dense-weight); line-height: var(--t-dense-lh); letter-spacing: var(--t-dense-ls); }
.type-caption { font-family: var(--font-text); font-size: var(--t-cap-size);      font-weight: var(--t-cap-weight);   line-height: var(--t-cap-lh);   letter-spacing: var(--t-cap-ls); }
.type-caption-strong { font-family: var(--font-text); font-size: var(--t-caps-size); font-weight: var(--t-caps-weight); line-height: var(--t-caps-lh); letter-spacing: var(--t-caps-ls); }
.type-button-large { font-family: var(--font-text); font-size: var(--t-btnl-size); font-weight: var(--t-btnl-weight); line-height: var(--t-btnl-lh); letter-spacing: var(--t-btnl-ls); }
.type-button-utility { font-family: var(--font-text); font-size: var(--t-btnu-size); font-weight: var(--t-btnu-weight); line-height: var(--t-btnu-lh); letter-spacing: var(--t-btnu-ls); }
.type-fine    { font-family: var(--font-text); font-size: var(--t-fine-size);     font-weight: var(--t-fine-weight);  line-height: var(--t-fine-lh);  letter-spacing: var(--t-fine-ls); }
.type-micro   { font-family: var(--font-text); font-size: var(--t-micro-size);    font-weight: var(--t-micro-weight); line-height: var(--t-micro-lh); letter-spacing: var(--t-micro-ls); }
.type-nav     { font-family: var(--font-text); font-size: var(--t-nav-size);      font-weight: var(--t-nav-weight);   line-height: var(--t-nav-lh);   letter-spacing: var(--t-nav-ls); }