/*
  Design tokens — Seguros y Ahorro
  Colores extraídos del logo real de la marca:
    Azul (protección):  #0077BC → #00B3D2
    Verde (ahorro):      #00AF7B → #00C868
  Tipografía: IBM Plex Sans (pairing "Financial Trust" — banca/seguros/fintech).
  Todas las combinaciones texto/fondo cumplen contraste AA (4.5:1) — ver notas inline.
*/

:root {
  /* ---- Marca: azul (protección) ---- */
  --color-primary: #0077bc; /* texto blanco encima: contraste 4.81:1 (AA) */
  --color-primary-light: #00b3d2; /* uso decorativo / gradientes, no como fondo de texto */
  --color-primary-dark: #0a3454; /* navy derivado, para headings y footer */

  /* ---- Marca: verde (ahorro/crecimiento) ---- */
  --color-accent: #00af7b; /* uso decorativo / badges / iconos, no como fondo de texto */
  --color-accent-dark: #067a56; /* texto blanco encima: contraste 5.35:1 (AA) — usar en botones CTA sólidos */
  --color-accent-bright: #00c868; /* highlights, subrayados, gráficos */

  /* ---- Neutros ---- */
  --color-bg: #f8fafc;
  --color-bg-alt: #eff5f8;
  --color-surface: #ffffff;
  --color-text: #14293b;
  --color-text-muted: #4b5a6a;
  --color-border: #dce6ed;

  /* ---- Estado ---- */
  --color-success: #067a56;
  --color-error: #dc2626;
  --color-warning: #b45309;

  /* ---- Tipografía ---- */
  --font-base:
    'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --text-xs: 0.8125rem; /* 13px */
  --text-sm: 0.9375rem; /* 15px */
  --text-base: 1.0625rem; /* 17px — base ligeramente mayor a 16px para público 35-55 */
  --text-lg: 1.25rem; /* 20px */
  --text-xl: 1.5rem; /* 24px */
  --text-2xl: 2rem; /* 32px */
  --text-3xl: 2.75rem; /* 44px */
  --text-4xl: 3.5rem; /* 56px */

  --leading-tight: 1.2;
  --leading-normal: 1.6;

  /* ---- Espaciado (escala 8px, generosa para marketing) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ---- Radios y sombras ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(10, 52, 84, 0.06), 0 1px 3px rgba(10, 52, 84, 0.08);
  --shadow-md: 0 4px 12px rgba(10, 52, 84, 0.08), 0 2px 4px rgba(10, 52, 84, 0.06);
  --shadow-lg: 0 12px 32px rgba(10, 52, 84, 0.12), 0 4px 8px rgba(10, 52, 84, 0.06);

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-pad: var(--space-5);
  --header-h: 76px; /* fallback antes de medir el header real via JS */

  /* ---- Movimiento ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 180ms;
  --duration-base: 280ms;
  --duration-slow: 480ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}