/*
 * Corza typography + link styles.
 *
 * Pixel values lifted directly from corza.com's `custom.css`. The
 * marketing site uses two parallel scales (legacy `.t-*` rem-based at
 * 9px root, and a newer `.h1/.h2/.h3` px-based scale). We use the
 * newer pixel scale because it's clearer and what current pages use.
 *
 * Caveat: the prototype falls back to system fonts since `GT Eesti
 * Display` requires licensed Corza font files. Visual proportions are
 * faithful; the typeface itself isn't until we wire fonts.
 */

.t-base,
.t-display-xxl,
.t-display-xl,
.t-h1,
.t-h2,
.t-h3,
.t-h4,
.t-body,
.t-body-l,
.t-body-s,
.t-eyebrow,
.t-caption {
  font-family: var(--corza-font-display);
  color: var(--corza-ink);
}

/* Display — for mega hero text */
.t-display-xxl {
  font-size: 44px;
  font-weight: 700;
  line-height: 44px;
  margin: 0 0 0.5rem;
}
@media (min-width: 576px) {
  .t-display-xxl {
    font-size: 80px;
    line-height: 80px;
  }
}

.t-display-xl {
  font-size: 36px;
  font-weight: 700;
  line-height: 40px;
  margin: 0 0 0.5rem;
}
@media (min-width: 576px) {
  .t-display-xl {
    font-size: 44px;
    line-height: 48px;
  }
}

/* Headings */
.t-h1 {
  font-size: 28px;
  font-weight: 700;
  line-height: 32px;
  margin: 0 0 0.5rem;
}
@media (min-width: 576px) {
  .t-h1 {
    font-size: 36px;
    line-height: 40px;
  }
}

.t-h2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  margin: 0 0 0.5rem;
}
@media (min-width: 576px) {
  .t-h2 {
    font-size: 28px;
    line-height: 32px;
  }
}

.t-h3 {
  font-size: 18px;
  font-weight: 700;
  line-height: 22px;
  margin: 0 0 0.5rem;
}
@media (min-width: 576px) {
  .t-h3 {
    font-size: 20px;
    line-height: 24px;
  }
}

.t-h4 {
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  margin: 0 0 0.5rem;
}
@media (min-width: 576px) {
  .t-h4 {
    font-size: 18px;
    line-height: 22px;
  }
}

/* Eyebrow / caption — uppercase mono-style label, used as Pack
 * `superheading` and section labels on corza.com. */
.t-eyebrow {
  color: var(--corza-orange);
  font-family: "Apercu Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
}
@media (min-width: 576px) {
  .t-eyebrow {
    font-size: 14px;
  }
}

.t-eyebrow--muted {
  color: rgba(33, 31, 29, 0.5);
}

/* Body */
.t-body {
  font-size: 16px;
  font-weight: 300;
  line-height: 20px;
  margin: 0 0 1rem;
}

.t-body-l {
  font-size: 18px;
  font-weight: 300;
  line-height: 22px;
  margin: 0 0 1rem;
}
@media (min-width: 992px) {
  .t-body-l {
    font-size: 20px;
    line-height: 24px;
  }
}

.t-body-s {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  margin: 0 0 1rem;
}

.t-body strong,
.t-body-l strong,
.t-body-s strong {
  font-weight: 600;
}

/* Links */
.t-link {
  color: var(--corza-teal-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--corza-transition-base);
}
.t-link:hover,
.t-link:focus-visible {
  color: var(--corza-fog);
  text-decoration: underline;
}

/* Inline link inside body copy — inherits paragraph color shifting */
.t-body a,
.t-body-l a,
.t-body-s a {
  color: var(--corza-teal-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--corza-transition-base);
}
.t-body a:hover,
.t-body-l a:hover,
.t-body-s a:hover {
  color: var(--corza-fog);
}

/* Quiet/inverse link variants */
.t-link--quiet {
  color: var(--corza-ink);
}
.t-link--quiet:hover,
.t-link--quiet:focus-visible {
  color: var(--corza-orange);
}

.t-link--inverse {
  color: #fff;
}
.t-link--inverse:hover,
.t-link--inverse:focus-visible {
  color: var(--corza-fog);
}