/**
 * Tokens de diseño Alfaler — Design System
 * Colores, tipografía, espaciado, sombras, radios
 */

:root {
  /* === COLOR === */
  --alf-navy: #0B3C49;
  --alf-amber: #F2A33C;
  --alf-ivory: #FAF7F2;
  --alf-ink: #1E2528;

  --alf-success: #2E8B57;
  --alf-error: #C0392B;
  --alf-info: #2C7FB8;

  --alf-gray-100: #F5F4F1;
  --alf-gray-200: #E8E6E1;
  --alf-gray-300: #D8D6D1;
  --alf-gray-400: #B5B3AD;
  --alf-gray-500: #8A8F94;
  --alf-gray-600: #6A6F74;
  --alf-gray-700: #4A5257;
  --alf-gray-800: #2E3539;
  --alf-gray-900: #1E2528;

  /* === TIPOGRAFÍA === */
  --alf-font-head: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --alf-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Escala tipográfica */
  --alf-h1: clamp(2rem, 4vw, 3.25rem);
  --alf-h2: clamp(1.5rem, 3vw, 2.25rem);
  --alf-h3: clamp(1.25rem, 2vw, 1.625rem);
  --alf-h4: 1.25rem;
  --alf-body: clamp(1rem, 1.1vw, 1.125rem);
  --alf-caption: 0.875rem;
  --alf-small: 0.75rem;

  --alf-lh-head: 1.15;
  --alf-lh-body: 1.6;

  /* === ESPACIADO === */
  --alf-section-pad-y: clamp(3rem, 6vw, 7.5rem);
  --alf-section-pad-x: clamp(1rem, 4vw, 2rem);
  --alf-grid-gap: 1.5rem;
  --alf-contenedor-max: 1240px;

  /* === BORDES Y SOMBRAS === */
  --alf-radius-sm: 6px;
  --alf-radius-btn: 8px;
  --alf-radius-card: 10px;
  --alf-radius-img: 16px;
  --alf-radius-lg: 24px;

  --alf-shadow: 0 8px 24px rgba(11, 60, 73, 0.08);
  --alf-shadow-hover: 0 12px 32px rgba(11, 60, 73, 0.12);

  /* === TRANSICIONES === */
  --alf-transition: 150ms ease;
  --alf-transition-slow: 250ms ease;
}

/* Breakpoints (referencia):
   480px  -> móvil
   768px  -> tablet
   1024px -> desktop
   1240px -> contenedor máximo
*/