:root {
  /* Font family */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
  --font-mono: 'Monaco', 'Courier New', monospace;
  /* Display — expressive, technical. Self-hosted (see tokens/fonts.css). */
  --font-display: 'Space Grotesk', var(--font-sans);
  
  /* Font sizes */
  --font-size-h1: 56px;
  --font-size-h2: 40px;
  --font-size-h3: 28px;
  --font-size-body: 16px;
  --font-size-small: 12px;
  --font-size-mono: 14px;
  
  /* Line heights */
  --line-height-h1: 1.2;
  --line-height-h2: 1.3;
  --line-height-h3: 1.4;
  --line-height-body: 1.6;
  --line-height-small: 1.5;
  
  /* Font weights */
  --font-weight-regular: 400;
  --font-weight-bold: 600;
  --font-weight-display: 600;
  
  /* Letter spacing */
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.05em;
}

/* Type scales as CSS utility classes */
h1, .h1 {
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
  font-weight: var(--font-weight-display);
  font-family: var(--font-display);
  color: var(--color-fg-primary);
}

h2, .h2 {
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  font-weight: var(--font-weight-display);
  font-family: var(--font-display);
  color: var(--color-fg-primary);
}

h3, .h3 {
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  font-weight: var(--font-weight-display);
  color: var(--color-fg-primary);
}

.hero-display {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.95;
}

p, body {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-family: var(--font-sans);
  color: var(--color-fg-primary);
}

small {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
}

code, pre {
  font-family: var(--font-mono);
  font-size: var(--font-size-mono);
}