/* ──────────────────────────────────────────────────────────────
   Airspeed — Typography
   Two voices. Inter Medium does all the talking; IBM Plex Mono
   whispers (uppercase eyebrows, labels, taglines, data). Expressive
   content uses Inter Tight — same skeleton as Inter, tighter and
   heavier, so it reads as the brand shouting rather than a different
   brand. No serif, no italics anywhere.

   Rules: headlines are sentence case, tightly tracked (−2.2%), and
   end with a period. Never use bold/black display weights in the
   editorial system.
   ────────────────────────────────────────────────────────────── */

:root {
  /* ---- Families ---- */
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:  'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-display: 'Inter Tight', 'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif; /* expressive only */

  /* ---- Weights ---- */
  --fw-regular: 400;
  --fw-medium:  500; /* the workhorse — headlines & UI */
  --fw-semi:    600;
  --fw-bold:    700; /* wordmark, big numbers, expressive display */

  /* ---- Editorial type sizes ---- */
  --display-xl: 76px;
  --display-l:  56px;
  --display-m:  40px;
  --heading:    24px;
  --body-l:     20px;
  --body-m:     16px;
  --body-s:     13.5px;
  --eyebrow:    12px;
  --caption:    11px;

  /* ---- Line-heights (unitless ratios) ---- */
  --display-xl-lh: 1.05;
  --display-l-lh:  1.05;
  --display-m-lh:  1.08;
  --heading-lh:    1.20;
  --body-l-lh:     1.50;
  --body-m-lh:     1.50;
  --body-s-lh:     1.55;
  --eyebrow-lh:    1.0;

  /* ---- Letter-spacing / tracking ---- */
  --display-xl-ls: -0.022em;
  --display-l-ls:  -0.022em;
  --display-m-ls:  -0.02em;
  --heading-ls:    -0.01em;
  --eyebrow-ls:    0.08em;
  --caption-ls:    0.04em;
}

/* ============================================================
   Reusable type classes — apply directly or mirror in components
   ============================================================ */

.as-display-xl,
.as-display-l,
.as-display-m,
.as-heading {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  color: var(--text-strong);
  text-wrap: balance;
  margin: 0;
}
.as-display-xl { font-size: var(--display-xl); line-height: var(--display-xl-lh); letter-spacing: var(--display-xl-ls); }
.as-display-l  { font-size: var(--display-l);  line-height: var(--display-l-lh);  letter-spacing: var(--display-l-ls); }
.as-display-m  { font-size: var(--display-m);  line-height: var(--display-m-lh);  letter-spacing: var(--display-m-ls); }
.as-heading    { font-size: var(--heading);    line-height: var(--heading-lh);    letter-spacing: var(--heading-ls); }

.as-body-l { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--body-l); line-height: var(--body-l-lh); color: var(--text-body); margin: 0; text-wrap: pretty; }
.as-body-m { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--body-m); line-height: var(--body-m-lh); color: var(--text-body); margin: 0; text-wrap: pretty; }

/* Mono eyebrow — uppercase, tracked, paired with a 7px accent dot */
.as-eyebrow {
  font-family: var(--font-mono);
  font-weight: var(--fw-medium);
  font-size: var(--eyebrow);
  line-height: var(--eyebrow-lh);
  letter-spacing: var(--eyebrow-ls);
  text-transform: uppercase;
  color: var(--text-eyebrow);
}

/* The signature two-tone headline: key phrase in ink, the rest muted */
.as-twotone { color: var(--text-strong); }
.as-twotone .muted { color: var(--ink-muted); }

/* Expressive only — Inter Tight display, mono tagline */
.as-expressive-display { font-family: var(--font-display); font-weight: var(--fw-bold); color: var(--ink); letter-spacing: -0.035em; line-height: 1.02; margin: 0; text-wrap: balance; }
.as-expressive-tagline { font-family: var(--font-mono); font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: 0.1em; line-height: 1.3; color: var(--ink); margin: 0; }
.as-bignum             { font-family: var(--font-display); font-weight: var(--fw-bold); letter-spacing: -0.04em; color: var(--ink); margin: 0; }

/* Headline highlight — the sunrise run through a phrase */
.as-sunrise-text { background: var(--gradient-headline); -webkit-background-clip: text; background-clip: text; color: transparent; }