/* ==========================================================
   CTG DESIGN SYSTEM v1
   Typography Foundation
   ========================================================== */

:root {
  --ctg-font-sans: var(--ctg-public-font-heading, "Instrument Sans", sans-serif);

  --ctg-type-eyebrow-size: var(--ctg-public-type-eyebrow, 0.8125rem);
  --ctg-type-eyebrow-weight: 700;
  --ctg-type-eyebrow-leading: 1.4;
  --ctg-type-eyebrow-tracking: 0.16em;
  --ctg-type-eyebrow-color: var(--ctg-public-eyebrow-primary, #b8c9ff);
}

/*
 * CTG Section Eyebrow
 *
 * Owns typography only.
 * Section/component CSS continues to own spacing, placement,
 * reveal state, and interaction behavior.
 */
.ctg-section-eyebrow {
  font-family: var(--ctg-public-font-body, "Manrope", sans-serif);
  font-size: var(--ctg-type-eyebrow-size);
  font-weight: var(--ctg-type-eyebrow-weight);
  line-height: var(--ctg-type-eyebrow-leading);
  letter-spacing: var(--ctg-type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--ctg-type-eyebrow-color);
}

/* CTG major section title role — semantic registration v189 */

/* ==========================================================
   CTG DESIGN SYSTEM v1
   Phase 3C — Major Title Typography
   ========================================================== */

:root {
  --ctg-type-title-standard-size: var(--ctg-public-type-h2, 3.25rem);
  --ctg-type-title-standard-weight: 560;
  --ctg-type-title-standard-leading: 1.1;
  --ctg-type-title-standard-tracking: -0.05em;

  --ctg-type-title-xl-size: clamp(50px, 5.6vw, 86px);
  --ctg-type-title-xl-weight: 520;
  --ctg-type-title-xl-leading: 0.97;
  --ctg-type-title-xl-tracking: -0.058em;

  --ctg-type-title-compact-size: var(--ctg-public-type-h2, 3.25rem);
  --ctg-type-title-compact-weight: 520;
  --ctg-type-title-compact-leading: 1.1;
  --ctg-type-title-compact-tracking: -0.05em;
}

h1.ctg-section-title,
h2.ctg-section-title,
h3.ctg-section-title {
  color: var(--ctg-public-heading-dark, #f8f8f5);
  font-family: var(--ctg-font-sans);
  font-size: var(--ctg-type-title-standard-size);
  font-weight: var(--ctg-type-title-standard-weight);
  line-height: var(--ctg-type-title-standard-leading);
  letter-spacing: var(--ctg-type-title-standard-tracking);
}

h1.ctg-thesis-title,
h2.ctg-thesis-title,
h3.ctg-thesis-title,
h1.ctg-chapter-title,
h2.ctg-chapter-title,
h3.ctg-chapter-title {
  font-family: var(--ctg-font-sans);
  font-size: var(--ctg-type-title-xl-size);
  font-weight: var(--ctg-type-title-xl-weight);
  line-height: var(--ctg-type-title-xl-leading);
  letter-spacing: var(--ctg-type-title-xl-tracking);
}

h1.ctg-compact-title,
h2.ctg-compact-title,
h3.ctg-compact-title {
  color: var(--ctg-public-heading-dark, #f8f8f5);
  font-family: var(--ctg-font-sans);
  font-size: var(--ctg-type-title-compact-size);
  font-weight: var(--ctg-type-title-compact-weight);
  line-height: var(--ctg-type-title-compact-leading);
  letter-spacing: var(--ctg-type-title-compact-tracking);
}

@media (max-width: 760px) {
  :root {
    --ctg-type-title-standard-tracking: -0.045em;

    --ctg-type-title-xl-size: clamp(42px, 11vw, 58px);
    --ctg-type-title-xl-leading: 0.98;
    --ctg-type-title-xl-tracking: -0.052em;

    --ctg-type-title-compact-tracking: -0.045em;
  }
}

/* ==========================================================
   CTG DESIGN SYSTEM v1
   Phase 3E — Body Copy Foundation
   ========================================================== */

:root {
  /*
   * Canonical CTG reading-copy scale.
   * Desktop: 17px equivalent. Mobile: 16px equivalent.
   * rem units preserve browser zoom and user font scaling.
   */
  --ctg-type-body-min: 1rem;
  --ctg-type-body-desktop: var(--ctg-public-type-body, 1.0625rem);
  --ctg-type-body-size: var(--ctg-type-body-desktop);
  --ctg-type-body-weight: 400;
  --ctg-type-body-leading: 1.7;
  --ctg-type-body-tracking: 0em;

  /* Canonical normal-reading text color, based on Diagnosis reference. */
  --ctg-color-text-body: var(--ctg-public-body-dark, #aeb4bd);

  /*
   * Reference paragraph rhythm.
   * Components opt into this token when stacked narrative paragraphs
   * should use the standard CTG reading cadence.
   */
  --ctg-space-body-paragraph: 1.375rem;
}

@media (max-width: 760px) {
  :root {
    --ctg-type-body-size: var(--ctg-type-body-min);
  }
}

/*
 * Canonical role for new/refactored normal reading copy.
 * Components retain color, width, spacing, alignment and positioning.
 */
.ctg-body-copy {
  font-family: var(--ctg-public-font-body, "Manrope", sans-serif);
  font-size: var(--ctg-type-body-size);
  font-weight: var(--ctg-type-body-weight);
  line-height: var(--ctg-type-body-leading);
  letter-spacing: var(--ctg-type-body-tracking);
  color: var(--ctg-color-text-body);
}

/* ==========================================================
   CTG DESIGN SYSTEM v1 — Body Rhythm Correction v218
   The body system owns reading typography. Paragraph spacing remains
   component-controlled, with a shared token available where the
   canonical narrative rhythm is appropriate.
   ========================================================== */
.ctg-body-copy-stack > * + * {
  margin-top: var(--ctg-space-body-paragraph);
}

/* ==========================================================
   CTG DESIGN SYSTEM v1 — Canonical Body Treatment v219
   Diagnosis is the visual reference for normal reading copy:
   Instrument Sans / 17px desktop / 16px mobile / 400 /
   1.65 leading / 0 tracking / #aeb4bd / 22px paragraph rhythm.
   ========================================================== */

/* ==========================================================
   CTG DESIGN SYSTEM v1 — Body Role Governance v311

   Semantic contract:
   Normal narrative/supporting reading copy uses .ctg-body-copy.

   Design system owns:
   - font family
   - font size
   - font weight
   - line height
   - letter spacing
   - body text color

   Components may own:
   - width / max-width
   - alignment
   - margins / paragraph spacing
   - positioning / layout

   Component-specific body typography should only be introduced
   when the text represents a genuinely different semantic role.
   ========================================================== */