:root {
  /* Colores */
  --color-bg: #EEEBE4;
  --color-ink: #1C2230;
  --color-accent: #E2A33B;
  --color-secondary: #2B6F76;
  --color-danger: #C44536;
  --color-success: #3F7D4F;
  --color-surface: #FFFFFF;

  /* Layout */
  --radius: 6px;
  --gutter: 16px;

  /* Tipografía */
  --font-display: 'Space Grotesk', 'Archivo', sans-serif;
  --font-body: 'Inter', 'Public Sans', sans-serif;
  --font-mono: 'JetBrains Mono', 'IBM Plex Mono', monospace;

  /* Escala tipográfica */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 20px;
  --text-xl: 28px;
  --text-2xl: 40px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: var(--text-base);
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--font-body);
  color: var(--color-ink);
  background-color: var(--color-bg);
  line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
}

h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

@media (prefers-contrast: more) {
  .badge-success { color: #1F4A2F; }
  .badge-danger  { color: #7A281E; }
  .badge-warning { color: #8C691E; }
}