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

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}

h1 { font-size: var(--text-3xl); font-weight: var(--weight-bold); font-family: var(--font-display); color: var(--text-primary); line-height: var(--leading-tight); }
h2 { font-size: var(--text-2xl); font-weight: var(--weight-bold); font-family: var(--font-display); color: var(--text-primary); line-height: var(--leading-tight); }
h3 { font-size: var(--text-xl); font-weight: var(--weight-semibold); color: var(--text-primary); line-height: var(--leading-tight); }
h4 { font-size: var(--text-lg); font-weight: var(--weight-medium); color: var(--text-primary); line-height: var(--leading-tight); }

code {
  font-family: var(--font-mono);
  background: var(--bg-surface);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: 0.9em;
}

pre {
  font-family: var(--font-mono);
  background: var(--bg-deepest);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  overflow-x: auto;
  line-height: var(--leading-relaxed);
  font-size: var(--text-sm);
}

small, .text-small { font-size: var(--text-xs); color: var(--text-muted); }
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.text-link { color: var(--text-link); cursor: pointer; }
.text-link:hover { text-decoration: underline; }