/* ==========================================================================
   ALCA · Movilidad a tu alcance — Design tokens (restyling 2026)
   Fuente de verdad para la maquetación. Bootstrap 5.3 se usa SOLO para
   grilla (container / row / col) y utilidades (spacing, display, flex).
   ========================================================================== */
:root {
  /* --- Color: marca (tomados del logo vectorial original) --- */
  --alca-azul-900: #00344F;   /* tinta profunda: footer, titulares sobre claro */
  --alca-azul-700: #004E73;   /* marca · azul profundo (cuadro silla de ruedas) */
  --alca-azul-500: #0076AF;   /* marca · azul ALCA (primario, links, botones) */
  --alca-celeste-400: #35A6DE;/* marca · celeste medio (decorativo / sobre oscuro) */
  --alca-celeste-200: #6DCFF6;/* marca · celeste claro (decorativo / sobre oscuro) */
  --alca-celeste-100: #CDEBF9;
  --alca-celeste-50:  #EEF8FD;/* fondos de sección suaves */

  /* --- Color: acento (verde del folleto: figura inclusiva) --- */
  --alca-verde-500: #8DC63F;  /* acento, siempre con texto azul-900 */
  --alca-verde-700: #3D7A12;  /* verde para texto/íconos sobre blanco */

  /* --- Neutros --- */
  --alca-tinta: #14242F;      /* texto principal */
  --alca-gris-600: #4A5D69;   /* texto secundario (7.0:1 sobre blanco) */
  --alca-gris-300: #C5D3DC;   /* bordes */
  --alca-gris-100: #F2F6F9;   /* fondos neutros */
  --alca-blanco: #FFFFFF;

  /* --- Estados --- */
  --alca-foco: #F2A900;       /* anillo de foco de alta visibilidad */
  --alca-error: #B3261E;
  --alca-ok: #3D7A12;

  /* --- Tipografía --- */
  --alca-font-display: "Lexend", "Segoe UI", system-ui, sans-serif;
  --alca-font-text: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;

  /* Escala (mobile first → desktop en ≥992px) */
  --alca-fs-display: 2.5rem;  /* 40 → 64 */
  --alca-fs-h1: 2.25rem;      /* 36 → 56 */
  --alca-fs-h2: 1.875rem;     /* 30 → 44 */
  --alca-fs-h3: 1.5rem;       /* 24 → 28 */
  --alca-fs-h4: 1.25rem;      /* 20 → 22 */
  --alca-fs-lead: 1.25rem;    /* 20 → 22 */
  --alca-fs-body: 1.125rem;   /* 18 (base accesible) */
  --alca-fs-small: 1rem;      /* 16 */
  --alca-fs-overline: .875rem;/* 14, mayúsculas, tracking .16em */

  --alca-lh-tight: 1.15;
  --alca-lh-heading: 1.25;
  --alca-lh-body: 1.6;

  /* --- Espaciado (base 8) — compatible con spacers de Bootstrap 1–5 --- */
  --alca-space-1: .25rem;  /* 4  = BS 1 */
  --alca-space-2: .5rem;   /* 8  = BS 2 */
  --alca-space-3: 1rem;    /* 16 = BS 3 */
  --alca-space-4: 1.5rem;  /* 24 = BS 4 · gutter de grilla */
  --alca-space-5: 3rem;    /* 48 = BS 5 */
  --alca-space-6: 4rem;    /* 64  · padding de sección mobile */
  --alca-space-7: 6rem;    /* 96  · padding de sección desktop */
  --alca-space-8: 8rem;    /* 128 */

  /* --- Morfología --- */
  --alca-radius-sm: 8px;   /* inputs, chips */
  --alca-radius-md: 12px;  /* botones */
  --alca-radius-lg: 20px;  /* tarjetas */
  --alca-radius-xl: 32px;  /* imágenes destacadas, paneles */
  --alca-tilt: -8deg;      /* inclinación de los cuadros del logo */

  --alca-shadow-1: 0 1px 2px rgba(0, 52, 79, .06), 0 2px 8px rgba(0, 52, 79, .06);
  --alca-shadow-2: 0 4px 12px rgba(0, 52, 79, .08), 0 16px 40px rgba(0, 52, 79, .10);

  /* --- Controles --- */
  --alca-control-h: 56px;  /* altura mínima de botones e inputs (target táctil ≥ 48) */
  --alca-header-h: 88px;
}

@media (min-width: 992px) {
  :root {
    --alca-fs-display: 4rem;
    --alca-fs-h1: 3.5rem;
    --alca-fs-h2: 2.75rem;
    --alca-fs-h3: 1.75rem;
    --alca-fs-h4: 1.375rem;
    --alca-fs-lead: 1.375rem;
  }
}