/* 
===================================================================
TYPOGRAPHY SYSTEM
Aplica variables de `vars.css` a etiquetas directas.
=================================================================== 
*/

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--c-text-main);
  margin: 0;
  margin-bottom: var(--space-md);
  line-height: 1.1;
  font-weight: var(--font-fw-bold);
  letter-spacing: -0.02em; /* Tighter tracking for display fonts */
}

h1 {
  font-size: var(--text-5xl);
  /* Optional: Hero text balance for better line wraps */
  text-wrap: balance; 
}

h2 {
  font-size: var(--text-4xl);
}

h3 {
  font-size: var(--text-3xl);
}

h4 {
  font-size: var(--text-2xl);
}

p {
  margin: 0;
  margin-bottom: var(--space-md);
  color: var(--c-text-muted);
  /* Line length control: 65-75 chars */
  max-width: 70ch; 
  /* Readability standard */
  text-wrap: pretty;
}

/* Large paragraph specific class */
p.lead {
  font-size: var(--text-lg);
  color: var(--c-text-main);
}

/* Small UI text */
small, .text-small {
  font-size: var(--text-sm);
  color: var(--c-text-subtle);
}

/* Links */
a {
  color: var(--c-brand-primary);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-snappy);
}

a:hover, a:focus {
  color: var(--c-brand-secondary);
}

/* Inline Code/Tags */
code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background-color: var(--c-bg-surface-1);
  padding: 0.2em 0.4em;
  border-radius: var(--radius-sm);
  border: 1px solid var(--c-border-subtle);
}