/* ============================================
   DESIGN TOKENS — Cambia aquí los colores/tipos
   y se actualiza todo el sitio
   ============================================ */

:root {
  /* —— Colores primarios —— */
  --color-brand:        #212E70;   /* Azul oscuro corporativo */
  --color-brand-light:  #1E4A8C;   /* Azul sobrio — CTAs, enlaces, hover */
  --color-brand-dark:   #212E70;   /* Fondo secciones oscuras → color del logo */

  /* —— Neutros —— */
  --color-white:        #ffffff;
  --color-bg-light:     #f8f9fb;   /* Fondos claros alternos */
  --color-bg-section:   #f0f2f7;   /* Fondos de sección */
  --color-border:       #e2e5ec;
  --color-text:         #1e1e2f;   /* Texto principal */
  --color-text-light:   #6b7280;   /* Texto secundario */
  --color-text-on-dark: #f0f4ff;   /* Texto sobre fondo oscuro */

  /* —— Tipografía —— */
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont,
                'Segoe UI', Roboto, sans-serif;
  --font-size-sm:   0.875rem;
  --font-size-base:  1rem;
  --font-size-lg:   1.125rem;
  --font-size-xl:   1.25rem;
  --font-size-2xl:  1.5rem;
  --font-size-3xl:  2rem;
  --font-size-4xl:  2.5rem;
  --font-size-5xl:  3rem;

  /* —— Espaciado —— */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* —— Layout —— */
  --container-max: 1200px;
  --container-padding: 1.5rem;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.1);
  --shadow-lg:  0 8px 30px rgba(0,0,0,0.12);

  /* —— Transiciones —— */
  --transition: 0.25s ease;
}