/* =============================================================================
 * Typography — reusable text styles mapped to the Figma type scale.
 * Source: Assets/Typography.png + Assets/Text and Content.png
 * Requires: design-tokens.css (loaded first — provides the CSS variables).
 *
 * Two ways to use:
 *   1) Utility classes on any element:
 *        <h1 class="text-heading-1">Explore Props</h1>
 *        <p  class="text-body text-content-secondary">…</p>
 *        <span class="text-caption font-mono text-content-tertiary">2m ago</span>
 *
 *   2) Opt-in scope — native tags styled automatically inside `.typography`:
 *        <article class="typography"> <h2>…</h2> <p>…</p> </article>
 *
 * Headings reference the semantic --font-size-heading-* aliases, so they step
 * down to the Figma "Mobile" sizes below the 600px switch breakpoint exactly
 * as defined in design-tokens.css (no extra media query needed here).
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * Headings — Semibold. Auto step-down at < 600px via the token aliases.
 *   Desktop : 60 / 50 / 40 / 30 / 24
 *   Mobile  : 40 / 30 / 28 / 24 / 24
 * -------------------------------------------------------------------------- */
.text-heading-1,
.text-heading-2,
.text-heading-3,
.text-heading-4,
.text-heading-5 {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-semibold);
  color: var(--color-content-primary);
  margin: 0;
}

.text-heading-1 {
  font-size: var(--font-size-heading-1); /* 60 → 40 */
  line-height: var(--line-height-tight);
  letter-spacing: -0.02em;
}

.text-heading-2 {
  font-size: var(--font-size-heading-2); /* 50 → 30 */
  line-height: var(--line-height-tight);
  letter-spacing: -0.02em;
}

.text-heading-3 {
  font-size: var(--font-size-heading-3); /* 40 → 28 */
  line-height: var(--line-height-heading);
  letter-spacing: -0.01em;
}

.text-heading-4 {
  font-size: var(--font-size-heading-4); /* 30 → 24 */
  line-height: var(--line-height-heading);
  letter-spacing: -0.01em;
}

.text-heading-5 {
  font-size: var(--font-size-heading-5); /* 24 */
  line-height: var(--line-height-heading);
}

/* -----------------------------------------------------------------------------
 * Body & supporting text — Regular by default (add .font-medium for the
 * "Medium" variants shown in Text and Content.png).
 * -------------------------------------------------------------------------- */
.text-headline,
.text-body-large,
.text-body,
.text-footnote,
.text-caption,
.text-small {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-regular);
  color: var(--color-content-primary);
  margin: 0;
}

.text-headline {
  font-size: var(--font-size-headline); /* 20 */
  line-height: var(--line-height-snug);
}

.text-body-large {
  font-size: var(--font-size-body-large); /* 18 */
  line-height: var(--line-height-normal);
}

.text-body {
  font-size: var(--font-size-body); /* 16 */
  line-height: var(--line-height-normal);
}

.content-edited {
  display: inline-block;
  margin-left: 6px;
  color: var(--color-content-tertiary);
  font-size: 10px;
  font-weight: var(--font-weight-medium);
  line-height: inherit;
  vertical-align: baseline;
  white-space: nowrap;
}

.text-footnote {
  font-size: var(--font-size-footnote); /* 14 */
  line-height: var(--line-height-normal);
}

.text-caption {
  font-size: var(--font-size-caption); /* 13 */
  line-height: var(--line-height-normal);
}

.text-small {
  font-size: var(--font-size-small); /* 12 */
  line-height: var(--line-height-normal);
}

/* -----------------------------------------------------------------------------
 * Weight modifiers — headings are Semibold; text styles ship Regular and
 * upgrade to Medium/Semibold with these.
 * -------------------------------------------------------------------------- */
.font-regular { font-weight: var(--font-weight-regular); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }

/* -----------------------------------------------------------------------------
 * Family modifier — Caption/Small use the mono face in the Mobile scale.
 * -------------------------------------------------------------------------- */
.font-mono { font-family: var(--font-mono); }
.font-sans { font-family: var(--font-sans); }

/* -----------------------------------------------------------------------------
 * Content color hierarchy (from Text and Content.png): headings = primary,
 * usernames/labels = secondary, handles/timestamps = tertiary, links = accent.
 * -------------------------------------------------------------------------- */
.text-content-primary { color: var(--color-content-primary); }
.text-content-secondary { color: var(--color-content-secondary); }
.text-content-tertiary { color: var(--color-content-tertiary); }
.text-content-accent { color: var(--color-content-accent); }

/* Gradient text accent (Text Gradient Primary). */
.text-gradient-primary {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* -----------------------------------------------------------------------------
 * Opt-in scope — native elements inherit the matching style automatically.
 * A class on the element always wins over these defaults.
 * -------------------------------------------------------------------------- */
.typography {
  font-family: var(--font-sans);
  color: var(--color-content-primary);
}

.typography h1:not([class]) {
  font-size: var(--font-size-heading-1);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  letter-spacing: -0.02em;
  margin: 0;
}

.typography h2:not([class]) {
  font-size: var(--font-size-heading-2);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  letter-spacing: -0.02em;
  margin: 0;
}

.typography h3:not([class]) {
  font-size: var(--font-size-heading-3);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading);
  letter-spacing: -0.01em;
  margin: 0;
}

.typography h4:not([class]) {
  font-size: var(--font-size-heading-4);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading);
  letter-spacing: -0.01em;
  margin: 0;
}

.typography h5:not([class]) {
  font-size: var(--font-size-heading-5);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading);
  margin: 0;
}

.typography p:not([class]) {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  margin: 0;
}

.typography small:not([class]) {
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
}