/* ==========================================================================
   MLinside — Typography
   Single font: Inter (variable, weights 100–900 + italic) — matches the
     site's `--t-text-font` (Inter 400/500 body & nav) and is also used for
     all headlines and all slide type. No separate display face.
   ========================================================================== */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../../fonts/Inter-Variable.ttf') format('truetype-variations');
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../../fonts/Inter-Italic-Variable.ttf') format('truetype-variations');
}

:root {
  /* Font families — Inter only; --font-display is an alias kept for
     backwards compatibility with existing components. */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: var(--font-body);

  /* Type scale (px, desktop) */
  --text-display-xl: 800 96px/0.95 var(--font-display);   /* hero, e.g. big gradient headline */
  --text-display-lg: 700 48px/1.1 var(--font-display);    /* section H1, uppercase */
  --text-display-md: 700 34px/1.15 var(--font-display);   /* card headline, uppercase */
  --text-display-sm: 600 20px/1.2 var(--font-display);    /* small uppercase kicker headline */

  --text-body-lg: 400 17px/1.5 var(--font-body);
  --text-body-md: 400 15px/1.5 var(--font-body);
  --text-body-sm: 400 13px/1.4 var(--font-body);
  --text-caption: 400 11px/1 var(--font-body);

  --text-nav: 500 18px/1.2 var(--font-body);
  --text-button: 500 16px/1 var(--font-body);

  /* ---- Slide type scale — THE STANDARD for 1920×1080 decks ----
     One token per text role. NEVER hand-pick a slide font-size: every piece of
     slide text uses one of these verbatim. If a headline does not fit, step
     DOWN exactly one rung (title→h1→h2→h3) — never invent an in-between value,
     and never scale up. Distilled from the ML System Design lecture deck.
     See readme.md → "Slide type standard". */
  --text-slide-numeral: 700 320px/1 var(--font-display);   /* ghost decorative section number */
  --text-slide-title:   700 96px/1.0 var(--font-display);  /* title-slide headline ONLY */
  --text-slide-h1:      700 72px/1.05 var(--font-display); /* section-divider headline */
  --text-slide-h2:      700 44px/1.1 var(--font-display);  /* content-slide title, column title */
  --text-slide-h3:      700 32px/1.15 var(--font-display); /* card / diagram label inside a slide */
  --text-slide-lead:    400 34px/1.35 var(--font-body);    /* deck / subtitle under a title */
  --text-slide-body:    400 30px/1.4 var(--font-body);     /* body copy */
  --text-slide-kicker:  500 24px/1.2 var(--font-body);     /* eyebrow above a headline (uppercase) */
  --text-slide-caption: 500 22px/1 var(--font-body);       /* role label / caption */

  /* Letter spacing */
  --tracking-display: -0.02em;   /* tight, matches source's -3px on 48px headlines */
  --tracking-caps: 0.04em;       /* small uppercase labels/kickers */
  --tracking-normal: 0;
}