/* =========================================================
   Design tokens: Abril Heredia
   Todo el sitio sale de estos valores. Si algo no está acá,
   no se usa.
   ========================================================= */
:root {
  /* Color */
  --color-bg: #ffffff;          /* fondo */
  --color-text: #000000;        /* texto principal */
  --color-text-muted: #6b6b6b;  /* texto secundario: 5.3:1 sobre blanco (AA) */
  --color-surface: #f0f0ef;     /* chips y botones */
  --color-surface-strong: #111111; /* chip activo y hover: invierte */
  --color-media: #f3f2f0;       /* fondo detrás de imágenes */
  --color-status: #4cd964;      /* punto verde de disponibilidad */

  /* Tipografía: una sola familia, la jerarquía se hace con color, no con tamaño */
  --font: Arial, Helvetica, sans-serif;
  --text-xs: 12px;   /* footer, metadata */
  --text-sm: 14px;   /* UI, chips, cuerpo de case study */
  --text-md: 16px;   /* frase principal, títulos de proyecto */
  --text-lg: 24px;   /* títulos de capítulo, datos */
  --text-xl: 32px;   /* título de case study */
  --text-2xl: 44px;  /* frases clave y datos grandes */
  --text-body: 17px; /* texto largo de lectura */
  --tracking: -0.02em;
  --leading-tight: 1.15;
  --leading-body: 1.5;

  /* Espaciado: escala de 4 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-10: 40px;
  --space-16: 64px;
  --space-30: 120px;

  /* Layout */
  --gutter: clamp(16px, 2.5vw, 20px);
  --measure: 560px;       /* ancho máximo de textos cortos */
  --measure-read: 620px;  /* columna de lectura del case study */
  --content-max: 1320px;  /* ancho máximo del contenido */

  /* Bordes */
  --radius-sm: 8px;     /* chips */
  --radius-pill: 100px; /* chip activo, botones */
  --radius-media: 16px; /* imágenes y tarjetas visuales */
}