/* ============================================================
   UpStart — Typography Tokens
   Single voice from display to body. Inter substitutes Linear's
   custom cut. Aggressive negative tracking on display.
   ============================================================ */

:root {
  /* --- Families --- */
  --font-display: 'Inter', 'SF Pro Display', -apple-system, system-ui, 'Segoe UI', Roboto, sans-serif;
  --font-text:    'Inter', 'SF Pro Display', -apple-system, system-ui, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* --- Weights --- */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* --- Type sizes (spacing-kind: px) --- */
  --display-xl-size: 80px;
  --display-lg-size: 56px;
  --display-md-size: 40px;
  --headline-size:   28px;
  --card-title-size: 22px;
  --subhead-size:    20px;
  --body-lg-size:    18px;
  --body-size:       16px;
  --body-sm-size:    14px;
  --caption-size:    12px;
  --button-size:     14px;
  --eyebrow-size:    13px;
  --mono-size:       13px;

  /* --- Line heights --- */
  --display-xl-lh: 1.05; /* @kind other */
  --display-lg-lh: 1.10; /* @kind other */
  --display-md-lh: 1.15; /* @kind other */
  --headline-lh: 1.20; /* @kind other */
  --card-title-lh: 1.25; /* @kind other */
  --subhead-lh: 1.40; /* @kind other */
  --body-lg-lh: 1.50; /* @kind other */
  --body-lh: 1.50; /* @kind other */
  --body-sm-lh: 1.50; /* @kind other */
  --caption-lh: 1.40; /* @kind other */
  --button-lh: 1.20; /* @kind other */
  --eyebrow-lh: 1.30; /* @kind other */
  --mono-lh: 1.50; /* @kind other */

  /* --- Letter spacing --- */
  --display-xl-ls: -3.0px; /* @kind other */
  --display-lg-ls: -1.8px; /* @kind other */
  --display-md-ls: -1.0px; /* @kind other */
  --headline-ls: -0.6px; /* @kind other */
  --card-title-ls: -0.4px; /* @kind other */
  --subhead-ls: -0.2px; /* @kind other */
  --body-lg-ls: -0.1px; /* @kind other */
  --body-ls: -0.05px; /* @kind other */
  --body-sm-ls: 0; /* @kind other */
  --caption-ls: 0; /* @kind other */
  --button-ls: 0; /* @kind other */
  --eyebrow-ls: 0.4px; /* @kind other */
  --mono-ls: 0; /* @kind other */

  /* --- Per-step weights --- */
  --display-xl-weight: 600; /* @kind other */
  --display-lg-weight: 600; /* @kind other */
  --display-md-weight: 600; /* @kind other */
  --headline-weight: 600; /* @kind other */
  --card-title-weight: 500; /* @kind other */
  --subhead-weight: 400; /* @kind other */
  --body-lg-weight: 400; /* @kind other */
  --body-weight: 400; /* @kind other */
  --body-sm-weight: 400; /* @kind other */
  --caption-weight: 400; /* @kind other */
  --button-weight: 500; /* @kind other */
  --eyebrow-weight: 500; /* @kind other */
  --mono-weight: 400; /* @kind other */
}

/* ============================================================
   Type utility classes — apply the full spec in one shot.
   ============================================================ */
.t-display-xl { font-family: var(--font-display); font-size: var(--display-xl-size); line-height: var(--display-xl-lh); letter-spacing: var(--display-xl-ls); font-weight: var(--display-xl-weight); }
.t-display-lg { font-family: var(--font-display); font-size: var(--display-lg-size); line-height: var(--display-lg-lh); letter-spacing: var(--display-lg-ls); font-weight: var(--display-lg-weight); }
.t-display-md { font-family: var(--font-display); font-size: var(--display-md-size); line-height: var(--display-md-lh); letter-spacing: var(--display-md-ls); font-weight: var(--display-md-weight); }
.t-headline   { font-family: var(--font-display); font-size: var(--headline-size);   line-height: var(--headline-lh);   letter-spacing: var(--headline-ls);   font-weight: var(--headline-weight); }
.t-card-title { font-family: var(--font-display); font-size: var(--card-title-size); line-height: var(--card-title-lh); letter-spacing: var(--card-title-ls); font-weight: var(--card-title-weight); }
.t-subhead    { font-family: var(--font-text);    font-size: var(--subhead-size);    line-height: var(--subhead-lh);    letter-spacing: var(--subhead-ls);    font-weight: var(--subhead-weight); }
.t-body-lg    { font-family: var(--font-text);    font-size: var(--body-lg-size);    line-height: var(--body-lg-lh);    letter-spacing: var(--body-lg-ls);    font-weight: var(--body-lg-weight); }
.t-body       { font-family: var(--font-text);    font-size: var(--body-size);       line-height: var(--body-lh);       letter-spacing: var(--body-ls);       font-weight: var(--body-weight); }
.t-body-sm    { font-family: var(--font-text);    font-size: var(--body-sm-size);    line-height: var(--body-sm-lh);    letter-spacing: var(--body-sm-ls);    font-weight: var(--body-sm-weight); }
.t-caption    { font-family: var(--font-text);    font-size: var(--caption-size);    line-height: var(--caption-lh);    letter-spacing: var(--caption-ls);    font-weight: var(--caption-weight); }
.t-button     { font-family: var(--font-text);    font-size: var(--button-size);     line-height: var(--button-lh);     letter-spacing: var(--button-ls);     font-weight: var(--button-weight); }
.t-eyebrow    { font-family: var(--font-text);    font-size: var(--eyebrow-size);    line-height: var(--eyebrow-lh);    letter-spacing: var(--eyebrow-ls);    font-weight: var(--eyebrow-weight); text-transform: uppercase; }
.t-mono       { font-family: var(--font-mono);    font-size: var(--mono-size);       line-height: var(--mono-lh);       letter-spacing: var(--mono-ls);       font-weight: var(--mono-weight); }