/* ===================================
   STAGE TYPOGRAPHY SYSTEM
   Breakpoints: mobile, tablet, tablet-large, desktop
   =================================== */

body.body-stage {
  /* Font families */
  --stage-font-primary: var(--primary-font);
  --stage-font-secondary: var(--secondary-font);
  --stage-font-tertiary: var(--third-font);
  --stage-ls-heading: -0.02em;

  /* Heading sizes */
  --stage-fs-h1: 2.75rem;
  --stage-fs-h2: 1.75rem;
  --stage-fs-h3: 1.375rem;
  --stage-fs-h4: 1.125rem;
  --stage-fs-h5: 1rem;
  --stage-fs-h6: 0.9375rem;

  /* Paragraph sizes */
  --stage-fs-p-large: 1rem;
  --stage-fs-p: 0.9375rem;
  --stage-fs-p-small: 0.8125rem;
  --stage-fs-p-data: 11.5px;
  --stage-fs-label: 0.8125rem;
  --stage-fs-caption: 0.75rem;
  --stage-fs-intro: var(--stage-fs-caption);
  --stage-fs-legal: 0.6875rem;
  --stage-fs-popup-dismiss: 0.5625rem;

  /* Link sizes */
  --stage-fs-a-large: 1rem;
  --stage-fs-a: 0.9375rem;
  --stage-fs-a-small: 0.8125rem;

  /* Button sizes */
  --stage-fs-btn-primary: 0.9375rem;
  --stage-fs-btn-secondary: 0.90625rem;
  --stage-fs-btn-third: 0.875rem;
}

/* Tablet */
@media (min-width: 48rem) {
  body.body-stage {
    --stage-fs-h1: 3.5rem;
    --stage-fs-h2: 2.375rem;
    --stage-fs-h3: 1.875rem;
    --stage-fs-h4: 1.5rem;
    --stage-fs-h5: 1.25rem;
    --stage-fs-h6: 1.125rem;

    --stage-fs-p-large: 1.25rem;
    --stage-fs-p: 1rem;
    --stage-fs-p-small: 0.9375rem;
    --stage-fs-p-data: 11.5px;
    --stage-fs-label: 0.875rem;
    --stage-fs-caption: 0.8125rem;
    --stage-fs-legal: 0.75rem;
    --stage-fs-popup-dismiss: 0.5625rem;

    --stage-fs-a-large: 1.25rem;
    --stage-fs-a: 1rem;
    --stage-fs-a-small: 0.9375rem;

    --stage-fs-btn-primary: 1.0625rem;
    --stage-fs-btn-secondary: 1.0625rem;
    --stage-fs-btn-third: 1rem;
  }
}

/* Tablet large */
@media (min-width: 64rem) {
  body.body-stage {
    --stage-fs-h1: 4.25rem;
    --stage-fs-h2: 2.75rem;
    --stage-fs-h3: 2.125rem;
    --stage-fs-h4: 1.625rem;
    --stage-fs-h5: 1.3125rem;
    --stage-fs-h6: 1.125rem;

    --stage-fs-p-large: 1.3125rem;
    --stage-fs-p: 1rem;
    --stage-fs-p-small: 0.9375rem;
    --stage-fs-p-data: 11.5px;
    --stage-fs-label: 0.875rem;
    --stage-fs-caption: 0.8125rem;
    --stage-fs-legal: 0.75rem;
    --stage-fs-popup-dismiss: 0.5625rem;

    --stage-fs-a-large: 1.3125rem;
    --stage-fs-a: 1rem;
    --stage-fs-a-small: 0.9375rem;

    --stage-fs-btn-primary: 1.125rem;
    --stage-fs-btn-secondary: 1.0625rem;
    --stage-fs-btn-third: 1rem;
  }
}

/* Desktop */
@media (min-width: 80rem) {
  body.body-stage {
    --stage-fs-h1: 5rem;
    --stage-fs-h2: 3rem;
    --stage-fs-h3: 2.25rem;
    --stage-fs-h4: 1.75rem;
    --stage-fs-h5: 1.375rem;
    --stage-fs-h6: 1.125rem;

    --stage-fs-p-large: 1.375rem;
    --stage-fs-p: 1rem;
    --stage-fs-p-small: 1rem;
    --stage-fs-p-data: 11.5px;
    --stage-fs-label: 0.9375rem;
    --stage-fs-caption: 0.875rem;
    --stage-fs-legal: 0.8125rem;
    --stage-fs-popup-dismiss: 0.5625rem;

    --stage-fs-a-large: 1.375rem;
    --stage-fs-a: 1rem;
    --stage-fs-a-small: 1rem;

    --stage-fs-btn-primary: 1.125rem;
    --stage-fs-btn-secondary: 1.125rem;
    --stage-fs-btn-third: 1rem;
  }
}

/* Base text color */
body.body-stage :where(h1, h2, h3, h4, h5, h6, p, label, li) {
  color: #000;
}

/* Headings */
body.body-stage :where(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  font-family: var(--stage-font-primary);
  font-weight: 400;
}

body.body-stage h1 {
  font-size: var(--stage-fs-h1);
  line-height: 1.08;
  letter-spacing: -0.024em;
  font-weight: 400;
  overflow-wrap: break-word;
}

body.body-stage h2 {
  font-size: var(--stage-fs-h2);
  line-height: 1.14;
  letter-spacing: -0.026em;
}

body.body-stage h3 {
  font-size: var(--stage-fs-h3);
  line-height: 1.18;
  letter-spacing: -0.022em;
}

body.body-stage h4 {
  font-size: var(--stage-fs-h4);
  line-height: 1.24;
  letter-spacing: -0.016em;
}

body.body-stage h5 {
  font-size: var(--stage-fs-h5);
  line-height: 1.3;
  letter-spacing: -0.012em;
}

body.body-stage h6 {
  font-size: var(--stage-fs-h6);
  line-height: 1.35;
  letter-spacing: -0.008em;
}

body.body-stage p[data-type-preview="h1"] {
  margin: 0;
  font-family: var(--stage-font-primary);
  font-size: var(--stage-fs-h1);
  line-height: 1.08;
  letter-spacing: -0.024em;
  font-weight: 400;
  overflow-wrap: break-word;
}

/* Paragraphs */
body.body-stage p {
  font-family: var(--stage-font-primary);
  font-size: var(--stage-fs-p);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.008em;
  color: #000;
}

body.body-stage :where(li) {
  font-family: var(--stage-font-primary);
  font-size: var(--stage-fs-p);
  line-height: 1.55;
}

body.body-stage .p-large {
  font-size: var(--stage-fs-p-large);
  line-height: 1.62;
  letter-spacing: -0.01em;
}

body.body-stage .p-small {
  font-size: var(--stage-fs-p-small);
  line-height: 1.5;
  letter-spacing: -0.004em;
}

/* Labels and micro copy */
body.body-stage .stage-label {
  font-size: var(--stage-fs-label);
  line-height: 1.3;
  letter-spacing: 0.02em;
  font-weight: 500;
}

body.body-stage .stage-caption {
  font-size: var(--stage-fs-caption);
  line-height: 1.4;
}

body.body-stage .stage-legal {
  font-size: var(--stage-fs-legal);
  line-height: 1.35;
}

body.body-stage .stage-eyebrow {
  font-size: var(--stage-fs-label);
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Links */
body.body-stage a {
  color: #000;
  font-family: var(--stage-font-primary);
  font-size: var(--stage-fs-a);
  line-height: 1.45;
  text-decoration-color: currentColor;
}

body.body-stage a:hover {
  color: #000;
  text-decoration-color: #000;
}

body.body-stage .a-large {
  font-size: var(--stage-fs-a-large);
  line-height: 1.4;
}

body.body-stage .a-small {
  font-size: var(--stage-fs-a-small);
  line-height: 1.4;
}

/* Buttons typography */
body.body-stage .primary-button {
  font-family: var(--stage-font-primary);
  font-size: var(--stage-fs-btn-primary);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

body.body-stage .secondary-button {
  font-family: var(--stage-font-primary);
  font-size: var(--stage-fs-btn-secondary);
  font-weight: 500;
  letter-spacing: -0.008em;
  line-height: 1.2;
}

body.body-stage .third-button,
body.body-stage .button-third {
  font-family: var(--stage-font-primary);
  font-size: var(--stage-fs-btn-third);
  font-weight: 500;
  letter-spacing: -0.006em;
  line-height: 1.2;
}

/* Font utility classes dedicated to stage */
body.body-stage .stage-font-primary {
  font-family: var(--stage-font-primary);
}

body.body-stage .stage-font-secondary {
  font-family: var(--stage-font-secondary);
}

body.body-stage .stage-font-tertiary {
  font-family: var(--stage-font-tertiary);
}