/* ==========================================================================
   VARIABLES.CSS
   Design tokens de Grupo CMA — colores, tipografía, espaciados, radios,
   sombras y transiciones. Fuente única de verdad para toda la maquetación.
   ========================================================================== */

:root {
  /* ---- Color de marca ---- */
  --color-navy-900: #000e38;
  --color-navy-800: #001a70; /* Azul institucional CMA */
  --color-navy-700: #0a2a8c;
  --color-navy-600: #17399e;
  --color-navy-100: #e7eaf5;

  --color-green-700: #008f3d;
  --color-green-600: #00b74f; /* Verde institucional CMA */
  --color-green-500: #1ecb63;
  --color-green-200: #b2e9ca; /* Verde menta (cards blog) */
  --color-green-100: #e5f9ed;

  /* ---- Neutrales ---- */
  --color-white: #ffffff;
  --color-black: #0a0a0a;
  --color-gray-900: #1c1e26;
  --color-gray-700: #4b4f58;
  --color-gray-500: #767b87;
  --color-gray-300: #c7cbd4;
  --color-gray-200: #e3e5ea;
  --color-gray-100: #eef0f3;
  --color-gray-50: #f7f8fa;

  /* ---- Semánticos ---- */
  --color-text: var(--color-gray-900);
  --color-text-muted: var(--color-gray-500);
  --color-text-inverse: var(--color-white);
  --color-bg: var(--color-white);
  --color-bg-alt: var(--color-gray-100);
  --color-border: var(--color-gray-200);
  --color-link: var(--color-navy-800);
  --color-error: #d3273e;
  --color-error-bg: #fdecee;
  --color-success: var(--color-green-600);
  --color-warning: #b98400;
  --color-warning-bg: #fff6e0;

  /* ---- Tipografía ----
     No se recibieron archivos de fuente propietaria dentro de los activos
     entregados (/Sitio/Assets). Se utiliza una pila de fuentes de sistema
     "font-stack" con métricas geométricas afines al diseño, evitando así
     cualquier dependencia de red o CDN externo (ver /fonts/README.txt). */
  --font-base: "Segoe UI", "Helvetica Neue", Roboto, Arial, sans-serif;
  --font-display: "Segoe UI Semibold", "Segoe UI", Roboto, Arial, sans-serif;

  --fs-100: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --fs-200: clamp(0.875rem, 0.84rem + 0.18vw, 0.9375rem);
  --fs-300: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  --fs-400: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  --fs-500: clamp(1.375rem, 1.25rem + 0.5vw, 1.625rem);
  --fs-600: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
  --fs-700: clamp(2.25rem, 1.9rem + 1.5vw, 3.25rem);
  --fs-800: clamp(2.75rem, 2.2rem + 2.2vw, 4.5rem);

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.6;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

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

  /* ---- Contenedores ---- */
  --container-max: 80rem;
  --container-pad: var(--space-5);

  /* ---- Radios y bordes ---- */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-pill: 62.4375rem;

  /* ---- Sombras ---- */
  --shadow-sm: 0 1px 3px rgba(0, 14, 56, 0.08);
  --shadow-md: 0 8px 24px rgba(0, 14, 56, 0.12);
  --shadow-lg: 0 16px 40px rgba(0, 14, 56, 0.18);

  /* ---- Transiciones ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur-normal: 250ms;
  --dur-slow: 400ms;

  /* ---- Capas (z-index) ---- */
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;
}