/* iWanna Gummies — typography.css */

.t-display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-snug);
  font-feature-settings: "ss01" on;
}
.t-hero {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--t-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--ink);
}
.t-hero em {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  font-size: 0.86em;
  letter-spacing: var(--tr-snug);
  display: inline-block;
  transform: translateY(-0.04em);
}
.t-h1 { font-family: var(--font-heading); font-weight: 700; font-size: var(--t-h1); line-height: var(--lh-snug); letter-spacing: var(--tr-tight); color: var(--ink); }
.t-h2 { font-family: var(--font-heading); font-weight: 700; font-size: var(--t-h2); line-height: var(--lh-snug); letter-spacing: var(--tr-snug); color: var(--ink); }
.t-h3 { font-family: var(--font-heading); font-weight: 600; font-size: var(--t-h3); line-height: var(--lh-snug); letter-spacing: var(--tr-snug); color: var(--ink); }
.t-h4 { font-family: var(--font-heading); font-weight: 600; font-size: var(--t-h4); line-height: var(--lh-normal); color: var(--ink); }

.t-body-lg { font-family: var(--font-body); font-size: var(--t-body-lg); line-height: var(--lh-relaxed); color: var(--ink-soft); font-weight: 400; }
.t-body { font-family: var(--font-body); font-size: var(--t-body); line-height: var(--lh-relaxed); color: var(--ink-soft); font-weight: 400; }
.t-small { font-family: var(--font-body); font-size: var(--t-small); line-height: var(--lh-normal); color: var(--ink-mute); }

.t-eyebrow {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tr-widest);
  color: var(--ink-mute);
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
}
.t-eyebrow::before {
  content: '';
  width: 22px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

.t-section-no {
  font-family: var(--font-display);
  font-size: var(--t-eyebrow);
  letter-spacing: var(--tr-wide);
  color: var(--ink-mute);
  display: block;
  margin-bottom: var(--s-4);
}

.t-wordmark-sleep   { font-family: var(--font-display); color: var(--p-sleep);   font-weight: 400; letter-spacing: var(--tr-snug); }
.t-wordmark-focus   { font-family: var(--font-display); color: var(--p-focus-deep); font-weight: 400; letter-spacing: var(--tr-snug); }
.t-wordmark-relax   { font-family: var(--font-display); color: var(--p-relax);   font-weight: 400; letter-spacing: var(--tr-snug); }
.t-wordmark-wakeup  { font-family: var(--font-display); color: var(--p-wakeup);  font-weight: 400; letter-spacing: var(--tr-snug); }
.t-wordmark-teal    { font-family: var(--font-display); color: var(--brand-teal); font-weight: 400; letter-spacing: var(--tr-snug); }

.t-numeral { font-family: var(--font-display); letter-spacing: var(--tr-snug); }

.t-lead {
  font-family: var(--font-body);
  font-size: var(--t-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--ink-soft);
  font-weight: 400;
  max-width: 56ch;
}

.t-quiet { color: var(--ink-mute); }
.t-faint { color: var(--ink-faint); }
.t-on-color { color: white; }

.balance { text-wrap: balance; }
.pretty { text-wrap: pretty; }