/* Typography — Consuming properties, world-agnostic */
/* Fonts loaded via <link> in index.html for optimal performance */

body {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-body);
  color: var(--color-text-primary);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  letter-spacing: var(--letter-spacing-heading);
  line-height: var(--line-height-heading);
  color: var(--color-text-primary);
}

.hero-title {
  font-size: var(--font-size-hero);
  text-align: var(--hero-text-align);
}

h1, .h1 { font-size: var(--font-size-h1); }
h2, .h2 { font-size: var(--font-size-h2); }
h3, .h3 { font-size: var(--font-size-h3); }

.text-sm { font-size: var(--font-size-sm); }
.text-xs { font-size: var(--font-size-xs); }

.label {
  font-family: var(--font-mono);
  font-size: var(--font-size-label);
  font-weight: 500;
  letter-spacing: var(--letter-spacing-label);
  text-transform: var(--text-transform-label);
  color: var(--color-text-tertiary);
}

.text-secondary { color: var(--color-text-secondary); }
.text-tertiary { color: var(--color-text-tertiary); }
.text-accent { color: var(--color-accent); }

p {
  max-width: 65ch;
  color: var(--color-text-secondary);
}

p + p {
  margin-top: var(--space-md);
}

strong {
  font-weight: 600;
  color: var(--color-text-primary);
}

em {
  font-style: italic;
}

a.link {
  color: var(--color-link);
  transition: color var(--duration-fast) var(--ease-primary);
}

a.link:hover {
  color: var(--color-link-hover);
}

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

/* Heading transform (uppercase for brutalist, none for others) */
[data-world] h1,
[data-world] h2,
[data-world] h3 {
  text-transform: var(--text-transform-heading);
}