/* ── HP typography scale ──────────────────────────────────────────
   Single family. Display = weight 500 at EVERY size (incl. 72px hero).
   Body = 400. Emphasis 500/600/700. Buttons = uppercase, tracked. */
:root {
  --font-sans: 'Manrope', 'Forma DJR Micro', Arial, 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 */

  /* Display — all weight 500, line-height ~1.0 */
  --display-xxl-size: 72px;  --display-xxl-lh: 1.0; /* @kind other */
  --display-xl-size:  56px;  --display-xl-lh:  1.0; /* @kind other */
  --display-lg-size:  44px;  --display-lg-lh:  1.0; /* @kind other */
  --display-md-size:  32px;  --display-md-lh:  1.0; /* @kind other */
  --display-sm-size:  24px;  --display-sm-lh:  1.17; /* @kind other */
  --display-xs-size:  20px;  --display-xs-lh:  1.0; /* @kind other */

  /* Body */
  --body-lg-size: 18px;  --body-lg-lh: 1.33; /* @kind other */
  --body-md-size: 16px;  --body-md-lh: 1.38; /* @kind other */

  /* Caption */
  --caption-md-size: 14px;   --caption-md-lh: 1.5; /* @kind other */
  --caption-sm-size: 12px;   --caption-sm-lh: 1.33; /* @kind other */

  /* Functional */
  --link-md-size:   16px;
  --button-md-size: 14px;   --button-md-track: 0.7px;
  --button-sm-size: 12.6px; --button-sm-track: 0.126px;
  --price-md-size:  24px;
}

/* Utility classes — convenience for cards/specimens (components use vars directly) */
.t-display-xxl { font-family: var(--font-sans); font-weight: 500; font-size: var(--display-xxl-size); line-height: var(--display-xxl-lh); letter-spacing: 0; }
.t-display-xl  { font-family: var(--font-sans); font-weight: 500; font-size: var(--display-xl-size);  line-height: var(--display-xl-lh);  letter-spacing: 0; }
.t-display-lg  { font-family: var(--font-sans); font-weight: 500; font-size: var(--display-lg-size);  line-height: var(--display-lg-lh);  letter-spacing: 0; }
.t-display-md  { font-family: var(--font-sans); font-weight: 500; font-size: var(--display-md-size);  line-height: var(--display-md-lh);  letter-spacing: 0; }
.t-display-sm  { font-family: var(--font-sans); font-weight: 500; font-size: var(--display-sm-size);  line-height: var(--display-sm-lh);  letter-spacing: 0; }
.t-display-xs  { font-family: var(--font-sans); font-weight: 500; font-size: var(--display-xs-size);  line-height: var(--display-xs-lh);  letter-spacing: 0; }
.t-body-lg     { font-family: var(--font-sans); font-weight: 400; font-size: var(--body-lg-size); line-height: var(--body-lg-lh); }
.t-body-md     { font-family: var(--font-sans); font-weight: 400; font-size: var(--body-md-size); line-height: var(--body-md-lh); }
.t-body-emphasis { font-family: var(--font-sans); font-weight: 500; font-size: var(--body-md-size); line-height: var(--body-md-lh); }
.t-caption-md  { font-family: var(--font-sans); font-weight: 400; font-size: var(--caption-md-size); line-height: var(--caption-md-lh); }
.t-caption-bold{ font-family: var(--font-sans); font-weight: 700; font-size: var(--caption-md-size); line-height: 1.3; }
.t-caption-sm  { font-family: var(--font-sans); font-weight: 400; font-size: var(--caption-sm-size); line-height: var(--caption-sm-lh); }
.t-button-md   { font-family: var(--font-sans); font-weight: 600; font-size: var(--button-md-size); letter-spacing: var(--button-md-track); text-transform: uppercase; }
.t-price-md    { font-family: var(--font-sans); font-weight: 500; font-size: var(--price-md-size); line-height: 1.17; }