/* ==========================================================================
   Tokens de diseño ECAVANT
   Colores base tomados de logo.png (#946333 y #A97544).
   Todos los pares texto/fondo usados cumplen WCAG 2.1 AA (ver comentarios).
   ========================================================================== */

:root {
  /* Marca */
  --color-bronce: #946333;              /* 5,13:1 sobre blanco */
  --color-bronce-claro: #a97544;        /* solo bordes e íconos: 3,95:1 sobre blanco */
  --color-bronce-oscuro: #7a4f26;       /* enlaces y foco: 7,06:1 sobre blanco */
  --color-bronce-oscuro-hover: #5f3d1d; /* blanco encima: 9,67:1 */
  --color-bronce-sobre-oscuro: #c08a55; /* 5,76:1 sobre --color-tinta */

  /* Neutros */
  --color-tinta: #1f1a16;               /* 17,25:1 sobre blanco */
  --color-texto-suave: #5b5148;         /* 7,73:1 sobre blanco */
  --color-texto-claro: #f6f1ea;         /* 15,35:1 sobre --color-tinta */
  --color-texto-claro-suave: #d6cbbd;   /* 10,79:1 sobre --color-tinta */
  --color-fondo: #fff;
  --color-fondo-alt: #f6f1ea;
  --color-borde: #e4dacd;               /* decorativo, no transmite información */

  /* WhatsApp: verde oscuro para que el texto blanco cumpla AA (el #25D366 da 1,98:1) */
  --color-whatsapp: #0e6b4f;            /* blanco encima: 6,49:1 */
  --color-whatsapp-hover: #0a5440;      /* blanco encima: 8,92:1 */

  /* Errores de formulario */
  --color-error: #b3261e;               /* 6,54:1 sobre blanco; 5,82:1 sobre --color-fondo-alt */

  /* Tipografía (servida desde /assets/fonts, licencia OFL) */
  --fuente-titulos: "Barlow Semi Condensed", "Arial Narrow", system-ui, sans-serif;
  --fuente-texto: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --texto-sm: 0.875rem;
  --texto-base: 1rem;
  --texto-lg: 1.125rem;
  --titulo-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --titulo-h2: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  --titulo-h1: clamp(2.25rem, 1.6rem + 3.2vw, 3.75rem);

  /* Espaciado (escala de 4 px) */
  --espacio-1: 0.25rem;
  --espacio-2: 0.5rem;
  --espacio-3: 0.75rem;
  --espacio-4: 1rem;
  --espacio-5: 1.5rem;
  --espacio-6: 2rem;
  --espacio-7: 3rem;
  --espacio-8: 4rem;
  --espacio-9: 6rem;

  /* Forma y profundidad */
  --radio: 0.5rem;
  --radio-lg: 1rem;
  --sombra: 0 1px 2px rgb(31 26 22 / 0.06), 0 4px 16px rgb(31 26 22 / 0.08);
  --sombra-alta: 0 2px 4px rgb(31 26 22 / 0.08), 0 12px 32px rgb(31 26 22 / 0.14);

  /* Layout */
  --ancho-max: 72rem;
  --gutter: clamp(1rem, 4vw, 2rem);     /* 16 px en celular */
  --alto-cabecera: 4.5rem;
  --objetivo-tactil: 2.75rem;           /* 44 px mínimo para botones y enlaces de menú */

  /* Interacción */
  --transicion: 150ms ease;
  --foco: 3px solid var(--color-bronce-oscuro);
}