@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* One futuristic geometric family for everything; weight carries the hierarchy */
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Space Grotesk', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace; /* numeric/tabular data only */

  --text-xs: 12px;   --leading-xs: 16px;
  --text-sm: 14px;   --leading-sm: 20px;
  --text-base: 16px; --leading-base: 24px;
  --text-lg: 18px;   --leading-lg: 28px;
  --text-xl: 20px;   --leading-xl: 28px;
  --text-2xl: 24px;  --leading-2xl: 32px;
  --text-3xl: 30px;  --leading-3xl: 38px;
  --text-4xl: 36px;  --leading-4xl: 42px;
  --text-5xl: 48px;  --leading-5xl: 54px;
  --text-6xl: 60px;  --leading-6xl: 66px;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 700;
}

body { font-family: var(--font-body); -webkit-font-smoothing: antialiased; }