/*
  Tecnología Clara — variables de diseño
  Fuente única de verdad para colores, tipografía y espaciado.
  Se usa igual en el prototipo estático y, en la Fase 2, en el tema de WordPress
  (wp-content/themes/tecnologia-clara/assets/css/tokens.css importa este mismo archivo).
  Cambiar el nombre del sitio NO requiere tocar este archivo.

  Paleta "Azul confianza" (2026-09-25): azul marino #0F2E5C para títulos,
  cabecera y pie; un solo acento azul intenso #1558B0 para botones, enlaces y
  detalles (6.9:1 con blanco, AA). Sin morados. Los nombres de las variables
  (--color-verde, --color-coral...) se conservan como identificadores para
  no tocar cientos de referencias; ya no describen el matiz.
*/

:root {
  /* --- Color: marca --- */
  --color-bg: #FFFFFF;              /* crema muy claro, fondo principal (sin cambios) */
  --color-bg-alt: #FFFFFF;          /* fondo de tarjetas sobre el crema */
  --color-azul: #0F2E5C;            /* morado berenjena: texto principal, cabecera, footer, enlaces */
  --color-azul-suave: #EDF2F9;      /* fondo secundario morado, muy claro */
  --color-verde: #1558B0;           /* verde azulado oscuro: bordes decorativos, categorías */
  --color-verde-suave: #EBF2FC;     /* fondo secundario verde, muy claro */
  --color-coral: #1558B0;           /* acento turquesa: avisos, foco, detalles decorativos (NO usar como fondo de botón: solo 3.4:1 con blanco) */
  --color-coral-suave: #EBF2FC;     /* fondo de aviso/turquesa muy claro */
  --color-coral-boton: #1558B0;         /* fondo de botones turquesa: 5.2:1 con #FFFFFF, cumple AA (4.5:1) para texto de cualquier tamaño */
  --color-coral-boton-hover: #0F4388;   /* hover de botones turquesa: 7.52:1 con #FFFFFF, claramente más oscuro que el estado normal */

  /* --- Color: texto y bordes --- */
  --color-texto: #1B2533;           /* texto de cuerpo, sobre crema u blanco: 15.66:1 / 15.93:1 */
  --color-texto-suave: #4B5667;     /* texto secundario, metadatos, pies de foto: 7.52:1 sobre crema */
  --color-borde: #DCE3EC;           /* borde suave sobre fondo crema */
  --color-borde-fuerte: #0F2E5C;    /* borde de foco y elementos interactivos */

  /* --- Color: estado --- */
  --color-exito: #1E7A4C;
  --color-aviso: #954208;
  --color-aviso-bg: #FEF3E2;
  --color-peligro: #B3261E;
  --color-peligro-bg: #FBEAE5;
  --color-enlace: #1558B0;
  --color-enlace-visitado: #0F4388;

  /* --- Tipografía: pila del sistema, sin depender de Google Fonts --- */
  --fuente-base: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fuente-titulos: var(--fuente-base);

  --texto-base: 19px;               /* tamaño de referencia en escritorio */
  --texto-pequeno: 16px;
  --texto-grande: 22px;
  --texto-h1: 2.1rem;
  --texto-h2: 1.6rem;
  --texto-h3: 1.3rem;
  --interlineado: 1.6;
  --interlineado-titulos: 1.3;

  /* --- Escalado de accesibilidad (controlado por el botón A+/A-) --- */
  --escala-texto: 1;                /* 0.9 / 1 / 1.15 / 1.3 según preferencia guardada */

  --color-fondo-seccion: #F3F6FA;   /* fondo gris azulado de secciones alternas */

  /* --- Layout --- */
  --ancho-lectura: 860px;
  --ancho-contenedor: 1200px;
  --contenedor-espacio-lateral: clamp(16px, 4vw, 32px);
  --espacio-xs: 8px;
  --espacio-sm: 12px;
  --espacio-md: 20px;
  --espacio-lg: 32px;
  --espacio-xl: 48px;
  --espacio-xxl: 72px;

  /* --- Formas y sombra --- */
  --radio-borde: 14px;
  --radio-borde-sm: 8px;
  --sombra-suave: 0 2px 10px rgba(15, 46, 92, 0.07);
  --sombra-media: 0 6px 20px rgba(15, 46, 92, 0.12);

  /* --- Controles e interacción --- */
  --area-pulsable-min: 44px;
  --anillo-foco: 3px solid var(--color-coral);
  --anillo-foco-offset: 2px;
  --transicion-rapida: 120ms ease;
  --transicion-media: 200ms ease;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transicion-rapida: 0ms;
    --transicion-media: 0ms;
  }
}