/* ============================================================
   Ascend Intelligence — Typography tokens
   Display/Headings: Manrope · Body/UI: Inter
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-display: "Manrope", "Inter", system-ui, -apple-system, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    "SFMono-Regular", "Roboto Mono", ui-monospace, monospace;

  /* ---- Weights ---- */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semi:     600; /* @kind font */
  --fw-bold:     700; /* @kind font */
  --fw-x:        800; /* @kind font */

  /* ---- Type scale (desktop) ---- */
  --fs-display:  64px;  /* hero H1 */
  --fs-h1:       48px;
  --fs-h2:       36px;
  --fs-h3:       28px;
  --fs-h4:       22px;
  --fs-h5:       18px;
  --fs-lead:     20px;  /* intro / hero subhead */
  --fs-body:     16px;
  --fs-small:    14px;
  --fs-caption:  13px;
  --fs-eyebrow:  13px;  /* uppercase kicker */

  /* ---- Line heights ---- */
  --lh-tight:    1.05;  /* @kind other */
  --lh-heading:  1.15;  /* @kind other */
  --lh-snug:     1.35;  /* @kind other */
  --lh-body:     1.6;   /* @kind other */

  /* ---- Letter spacing ---- */
  --ls-display:  -0.02em; /* @kind other */
  --ls-heading:  -0.01em; /* @kind other */
  --ls-body:      0;      /* @kind other */
  --ls-eyebrow:   0.18em; /* @kind other */
  --ls-button:    0.08em; /* @kind other */
}

/* ============================================================
   Type utilities — bind every text size to a scale token.
   RULE: font-size only ever references a scale token; no literal px.
   Use these classes (or the --fs-* vars) instead of hand-set sizes.
   ============================================================ */
.text-display { font-family: var(--font-display); font-size: var(--fs-display); font-weight: var(--fw-x); line-height: var(--lh-tight); letter-spacing: var(--ls-display); }
.text-h1 { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: var(--fw-x); line-height: var(--lh-tight); letter-spacing: var(--ls-display); }
.text-h2 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: var(--fw-x); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); }
.text-h3 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); }
.text-h4 { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: var(--fw-bold); line-height: var(--lh-snug); }
.text-h5 { font-family: var(--font-display); font-size: var(--fs-h5); font-weight: var(--fw-semi); line-height: var(--lh-snug); }
.text-lead { font-family: var(--font-body); font-size: var(--fs-lead); font-weight: var(--fw-regular); line-height: var(--lh-body); }
.text-body { font-family: var(--font-body); font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: var(--lh-body); }
.text-small { font-family: var(--font-body); font-size: var(--fs-small); font-weight: var(--fw-regular); line-height: var(--lh-snug); }
.text-caption { font-family: var(--font-body); font-size: var(--fs-caption); font-weight: var(--fw-medium); line-height: var(--lh-snug); color: var(--ink-muted-dark); }
.text-eyebrow { font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: var(--fw-bold); line-height: 1; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--ai-cyan); }