/* ============================================================
   InTheRoom Productions — Typography scale
   Heavy display (700/800, UPPERCASE) vs Light body (300).
   Letter-spacing on labels/buttons (1.5px) = the "machined" feel.
   ============================================================ */

:root {
  /* DISPLAY — UPPERCASE, weight 700, tight tracking */
  --display-xl-size: 80px; /* @kind spacing */
  --display-xl-weight: 700; /* @kind other */
  --display-xl-lh: 1.0; /* @kind other */
  --display-xl-ls: -1px; /* @kind other */
  --display-lg-size: 56px; /* @kind spacing */
  --display-lg-weight: 700; /* @kind other */
  --display-lg-lh: 1.05; /* @kind other */
  --display-lg-ls: -0.5px; /* @kind other */
  --display-md-size: 40px; /* @kind spacing */
  --display-md-weight: 700; /* @kind other */
  --display-md-lh: 1.1; /* @kind other */
  --display-md-ls: -0.3px; /* @kind other */
  --display-sm-size: 32px; /* @kind spacing */
  --display-sm-weight: 700; /* @kind other */
  --display-sm-lh: 1.15; /* @kind other */
  --display-sm-ls: -0.2px; /* @kind other */

  /* TITLES */
  --title-lg-size: 24px; /* @kind spacing */
  --title-lg-weight: 700; /* @kind other */
  --title-lg-lh: 1.3; /* @kind other */
  --title-lg-ls: 0; /* @kind other */
  --title-md-size: 20px; /* @kind spacing */
  --title-md-weight: 400; /* @kind other */
  --title-md-lh: 1.4; /* @kind other */
  --title-md-ls: 0; /* @kind other */
  --title-sm-size: 18px; /* @kind spacing */
  --title-sm-weight: 400; /* @kind other */
  --title-sm-lh: 1.4; /* @kind other */
  --title-sm-ls: 0; /* @kind other */

  /* LABELS / BUTTONS — uppercase, letterspaced "machined" */
  --label-size: 13px; /* @kind spacing */
  --label-weight: 700; /* @kind other */
  --label-lh: 1.3; /* @kind other */
  --label-ls: 1.5px; /* @kind other */
  --button-size: 13px; /* @kind spacing */
  --button-weight: 700; /* @kind other */
  --button-lh: 1.0; /* @kind other */
  --button-ls: 1.5px; /* @kind other */
  --nav-size: 14px; /* @kind spacing */
  --nav-weight: 400; /* @kind other */
  --nav-lh: 1.4; /* @kind other */
  --nav-ls: 0.4px; /* @kind other */

  /* BODY — Light (300) */
  --body-md-size: 16px; /* @kind spacing */
  --body-md-weight: 300; /* @kind other */
  --body-md-lh: 1.5; /* @kind other */
  --body-md-ls: 0; /* @kind other */
  --body-sm-size: 14px; /* @kind spacing */
  --body-sm-weight: 300; /* @kind other */
  --body-sm-lh: 1.5; /* @kind other */
  --body-sm-ls: 0; /* @kind other */
  --caption-size: 12px; /* @kind spacing */
  --caption-weight: 400; /* @kind other */
  --caption-lh: 1.4; /* @kind other */
  --caption-ls: 0.5px; /* @kind other */

  /* DATA / TELEMETRY — mono */
  --data-size: 14px; /* @kind spacing */
  --data-weight: 500; /* @kind other */
  --data-lh: 1.2; /* @kind other */
  --data-ls: 0.5px; /* @kind other */
}

/* ---- Optional ready-made type classes (consumers may use vars directly) ---- */
.itr-display-xl { font-family: var(--font-display); font-size: var(--display-xl-size); font-weight: var(--display-xl-weight); line-height: var(--display-xl-lh); letter-spacing: var(--display-xl-ls); text-transform: uppercase; color: var(--ink); }
.itr-display-lg { font-family: var(--font-display); font-size: var(--display-lg-size); font-weight: var(--display-lg-weight); line-height: var(--display-lg-lh); letter-spacing: var(--display-lg-ls); text-transform: uppercase; color: var(--ink); }
.itr-display-md { font-family: var(--font-display); font-size: var(--display-md-size); font-weight: var(--display-md-weight); line-height: var(--display-md-lh); letter-spacing: var(--display-md-ls); text-transform: uppercase; color: var(--ink); }
.itr-display-sm { font-family: var(--font-display); font-size: var(--display-sm-size); font-weight: var(--display-sm-weight); line-height: var(--display-sm-lh); letter-spacing: var(--display-sm-ls); text-transform: uppercase; color: var(--ink); }
.itr-title-lg  { font-family: var(--font-display); font-size: var(--title-lg-size); font-weight: var(--title-lg-weight); line-height: var(--title-lg-lh); color: var(--ink); }
.itr-title-md  { font-family: var(--font-body); font-size: var(--title-md-size); font-weight: var(--title-md-weight); line-height: var(--title-md-lh); color: var(--body-strong); }
.itr-label     { font-family: var(--font-display); font-size: var(--label-size); font-weight: var(--label-weight); line-height: var(--label-lh); letter-spacing: var(--label-ls); text-transform: uppercase; }
.itr-body      { font-family: var(--font-body); font-size: var(--body-md-size); font-weight: var(--body-md-weight); line-height: var(--body-md-lh); color: var(--body); }
.itr-body-sm   { font-family: var(--font-body); font-size: var(--body-sm-size); font-weight: var(--body-sm-weight); line-height: var(--body-sm-lh); color: var(--body); }
.itr-caption   { font-family: var(--font-body); font-size: var(--caption-size); font-weight: var(--caption-weight); line-height: var(--caption-lh); letter-spacing: var(--caption-ls); color: var(--muted); }
.itr-data      { font-family: var(--font-mono); font-size: var(--data-size); font-weight: var(--data-weight); line-height: var(--data-lh); letter-spacing: var(--data-ls); }