/* ============================================================
   MathMentor — Typography tokens
   NotionInter (substitute: Inter) — one family, everything.
   Tight negative tracking at display sizes; 400 body / 700 heads.
   ============================================================ */

:root {
  --font-sans: "Inter", -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: var(--font-sans);

  /* OpenType: lining numerals + localized forms on text roles */
  --font-feature-text: "lnum" 1, "locl" 1;

  /* ---- Type scale: size / weight / line-height / tracking ---- */
  --display-1-size: 64px; /* @kind font */
  --display-1-weight: 700; /* @kind font */
  --display-1-lh: 1.0; /* @kind font */
  --display-1-ls: -2.125px; /* @kind font */
  --display-2-size: 54px; /* @kind font */
  --display-2-weight: 700; /* @kind font */
  --display-2-lh: 1.04; /* @kind font */
  --display-2-ls: -1.875px; /* @kind font */
  --heading-1-size: 40px; /* @kind font */
  --heading-1-weight: 700; /* @kind font */
  --heading-1-lh: 1.1; /* @kind font */
  --heading-1-ls: -1px; /* @kind font */
  --heading-2-size: 26px; /* @kind font */
  --heading-2-weight: 700; /* @kind font */
  --heading-2-lh: 1.23; /* @kind font */
  --heading-2-ls: -0.625px; /* @kind font */
  --heading-3-size: 22px; /* @kind font */
  --heading-3-weight: 700; /* @kind font */
  --heading-3-lh: 1.27; /* @kind font */
  --heading-3-ls: -0.25px; /* @kind font */
  --title-size: 20px; /* @kind font */
  --title-weight: 600; /* @kind font */
  --title-lh: 1.4; /* @kind font */
  --title-ls: -0.125px; /* @kind font */
  --body-md-size: 16px; /* @kind font */
  --body-md-weight: 400; /* @kind font */
  --body-md-lh: 1.5; /* @kind font */
  --body-md-ls: 0; /* @kind font */
  --body-sm-size: 15px; /* @kind font */
  --body-sm-weight: 400; /* @kind font */
  --body-sm-lh: 1.33; /* @kind font */
  --body-sm-ls: 0; /* @kind font */
  --button-size: 16px; /* @kind font */
  --button-weight: 500; /* @kind font */
  --button-lh: 1.5; /* @kind font */
  --button-ls: 0; /* @kind font */
  --caption-size: 14px; /* @kind font */
  --caption-weight: 400; /* @kind font */
  --caption-lh: 1.43; /* @kind font */
  --caption-ls: 0; /* @kind font */
  --eyebrow-size: 12px; /* @kind font */
  --eyebrow-weight: 600; /* @kind font */
  --eyebrow-lh: 1.33; /* @kind font */
  --eyebrow-ls: 0.125px; /* @kind font */
}

/* ---- Optional role utility classes (consumers may use the vars directly) ---- */
.mm-display-1 { font: var(--display-1-weight) var(--display-1-size)/var(--display-1-lh) var(--font-display); letter-spacing: var(--display-1-ls); }
.mm-display-2 { font: var(--display-2-weight) var(--display-2-size)/var(--display-2-lh) var(--font-display); letter-spacing: var(--display-2-ls); }
.mm-heading-1 { font: var(--heading-1-weight) var(--heading-1-size)/var(--heading-1-lh) var(--font-display); letter-spacing: var(--heading-1-ls); }
.mm-heading-2 { font: var(--heading-2-weight) var(--heading-2-size)/var(--heading-2-lh) var(--font-display); letter-spacing: var(--heading-2-ls); }
.mm-heading-3 { font: var(--heading-3-weight) var(--heading-3-size)/var(--heading-3-lh) var(--font-display); letter-spacing: var(--heading-3-ls); }
.mm-title     { font: var(--title-weight) var(--title-size)/var(--title-lh) var(--font-sans); letter-spacing: var(--title-ls); }
.mm-body-md   { font: var(--body-md-weight) var(--body-md-size)/var(--body-md-lh) var(--font-sans); letter-spacing: var(--body-md-ls); }
.mm-body-sm   { font: var(--body-sm-weight) var(--body-sm-size)/var(--body-sm-lh) var(--font-sans); letter-spacing: var(--body-sm-ls); }
.mm-caption   { font: var(--caption-weight) var(--caption-size)/var(--caption-lh) var(--font-sans); letter-spacing: var(--caption-ls); }
.mm-eyebrow   { font: var(--eyebrow-weight) var(--eyebrow-size)/var(--eyebrow-lh) var(--font-sans); letter-spacing: var(--eyebrow-ls); }