/* ============================================================
   TYPOGRAPHY — Gallery Design System
   SF Pro Display for headlines (>=19px), SF Pro Text for UI/body.
   Negative tracking at display sizes = the "Apple tight" cadence.
   Weight ladder: 300 / 400 / 600 / 700 (500 deliberately absent).
   ============================================================ */

:root {
  /* --- Families --------------------------------------------- */
  --font-display: "SF Pro Display", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --font-text: "SF Pro Text", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;

  /* --- Weights ---------------------------------------------- */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* --- Type scale (size / weight / line-height / tracking) --- */
  /* hero-display */
  --type-hero-size: 56px;
  --type-hero-weight: 600;
  --type-hero-line: 1.07;
  --type-hero-tracking: -0.28px;

  /* display-lg — tile headlines */
  --type-display-lg-size: 40px;
  --type-display-lg-weight: 600;
  --type-display-lg-line: 1.1;
  --type-display-lg-tracking: 0px;

  /* display-md — section heads */
  --type-display-md-size: 34px;
  --type-display-md-weight: 600;
  --type-display-md-line: 1.47;
  --type-display-md-tracking: -0.374px;

  /* lead — tile subcopy */
  --type-lead-size: 28px;
  --type-lead-weight: 400;
  --type-lead-line: 1.14;
  --type-lead-tracking: 0.196px;

  /* lead-airy — the rare weight 300 */
  --type-lead-airy-size: 24px;
  --type-lead-airy-weight: 300;
  --type-lead-airy-line: 1.5;
  --type-lead-airy-tracking: 0px;

  /* tagline — sub-nav category name */
  --type-tagline-size: 21px;
  --type-tagline-weight: 600;
  --type-tagline-line: 1.19;
  --type-tagline-tracking: 0.231px;

  /* body-strong */
  --type-body-strong-size: 17px;
  --type-body-strong-weight: 600;
  --type-body-strong-line: 1.24;
  --type-body-strong-tracking: -0.374px;

  /* body — default paragraph (17px, not 16) */
  --type-body-size: 17px;
  --type-body-weight: 400;
  --type-body-line: 1.47;
  --type-body-tracking: -0.374px;

  /* dense-link — footer / utility link stacks */
  --type-dense-link-size: 17px;
  --type-dense-link-weight: 400;
  --type-dense-link-line: 2.41;
  --type-dense-link-tracking: 0px;

  /* caption */
  --type-caption-size: 14px;
  --type-caption-weight: 400;
  --type-caption-line: 1.43;
  --type-caption-tracking: -0.224px;

  /* caption-strong */
  --type-caption-strong-size: 14px;
  --type-caption-strong-weight: 600;
  --type-caption-strong-line: 1.29;
  --type-caption-strong-tracking: -0.224px;

  /* button-large — store hero CTA (rare weight 300) */
  --type-button-large-size: 18px;
  --type-button-large-weight: 300;
  --type-button-large-line: 1;
  --type-button-large-tracking: 0px;

  /* button-utility — nav / utility labels */
  --type-button-utility-size: 14px;
  --type-button-utility-weight: 400;
  --type-button-utility-line: 1.29;
  --type-button-utility-tracking: -0.224px;

  /* fine-print */
  --type-fine-print-size: 12px;
  --type-fine-print-weight: 400;
  --type-fine-print-line: 1;
  --type-fine-print-tracking: -0.12px;

  /* micro-legal */
  --type-micro-legal-size: 10px;
  --type-micro-legal-weight: 400;
  --type-micro-legal-line: 1.3;
  --type-micro-legal-tracking: -0.08px;

  /* nav-link */
  --type-nav-link-size: 12px;
  --type-nav-link-weight: 400;
  --type-nav-link-line: 1;
  --type-nav-link-tracking: -0.12px;
}

/* ------------------------------------------------------------
   Optional utility classes — composed shorthands for each token.
   Use the CSS vars directly in components; these are conveniences.
   ------------------------------------------------------------ */
.t-hero {
  font-family: var(--font-display);
  font-size: var(--type-hero-size);
  font-weight: var(--type-hero-weight);
  line-height: var(--type-hero-line);
  letter-spacing: var(--type-hero-tracking);
}
.t-display-lg {
  font-family: var(--font-display);
  font-size: var(--type-display-lg-size);
  font-weight: var(--type-display-lg-weight);
  line-height: var(--type-display-lg-line);
  letter-spacing: var(--type-display-lg-tracking);
}
.t-display-md {
  font-family: var(--font-text);
  font-size: var(--type-display-md-size);
  font-weight: var(--type-display-md-weight);
  line-height: var(--type-display-md-line);
  letter-spacing: var(--type-display-md-tracking);
}
.t-lead {
  font-family: var(--font-display);
  font-size: var(--type-lead-size);
  font-weight: var(--type-lead-weight);
  line-height: var(--type-lead-line);
  letter-spacing: var(--type-lead-tracking);
}
.t-lead-airy {
  font-family: var(--font-text);
  font-size: var(--type-lead-airy-size);
  font-weight: var(--type-lead-airy-weight);
  line-height: var(--type-lead-airy-line);
  letter-spacing: var(--type-lead-airy-tracking);
}
.t-tagline {
  font-family: var(--font-display);
  font-size: var(--type-tagline-size);
  font-weight: var(--type-tagline-weight);
  line-height: var(--type-tagline-line);
  letter-spacing: var(--type-tagline-tracking);
}
.t-body {
  font-family: var(--font-text);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-line);
  letter-spacing: var(--type-body-tracking);
}
.t-body-strong {
  font-family: var(--font-text);
  font-size: var(--type-body-strong-size);
  font-weight: var(--type-body-strong-weight);
  line-height: var(--type-body-strong-line);
  letter-spacing: var(--type-body-strong-tracking);
}
.t-caption {
  font-family: var(--font-text);
  font-size: var(--type-caption-size);
  font-weight: var(--type-caption-weight);
  line-height: var(--type-caption-line);
  letter-spacing: var(--type-caption-tracking);
}
.t-fine-print {
  font-family: var(--font-text);
  font-size: var(--type-fine-print-size);
  font-weight: var(--type-fine-print-weight);
  line-height: var(--type-fine-print-line);
  letter-spacing: var(--type-fine-print-tracking);
}