/* ============================================================
   NEXO — variables.css
   Sistema de diseño: paleta, tipografía, espaciado, sombras
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600&display=swap');

:root {
  /* ── Paleta de marca ───────────────────────────────────── */
  --color-primary:         #083262;   /* Azul marino — navbar, footer, títulos */
  --color-primary-dark:    #051f3d;   /* Hover/estados activos */
  --color-primary-light:   #0f4a8a;   /* Variante más clara para fondos */
  --color-primary-bg:      #eef3fa;   /* Fondo muy claro azul */

  --color-secondary:       #18AFB8;   /* Turquesa — acento, CTAs, íconos */
  --color-secondary-dark:  #128a92;   /* Hover turquesa */
  --color-secondary-light: #e6fafa;   /* Fondo alternos de sección */
  --color-secondary-mid:   #b2e8eb;   /* Bordes, separadores suaves */

  --color-white:           #FFFFFF;
  --color-gray-light:      #f4f6f8;   /* Fondos neutros */
  --color-gray-border:     #dde3ec;   /* Bordes sutiles */
  --color-gray-text:       #4a5568;   /* Texto secundario/párrafos */
  --color-gray-muted:      #718096;   /* Texto terciario */
  --color-dark-text:       #1a1a1a;   /* Texto principal */

  /* Derivadas de accesibilidad */
  --color-focus-ring:      rgba(24,175,184,0.4);
  --color-overlay:         rgba(8,50,98,0.85);

  /* ── Tipografía ────────────────────────────────────────── */
  --font-heading: 'Outfit', sans-serif;
  --font-body:    'Inter', sans-serif;

  --fs-xs:   0.75rem;   /*  12px */
  --fs-sm:   0.875rem;  /*  14px */
  --fs-base: 1rem;      /*  16px */
  --fs-md:   1.125rem;  /*  18px */
  --fs-lg:   1.25rem;   /*  20px */
  --fs-xl:   1.5rem;    /*  24px */
  --fs-2xl:  2rem;      /*  32px */
  --fs-3xl:  2.5rem;    /*  40px */
  --fs-4xl:  3rem;      /*  48px */
  --fs-5xl:  3.75rem;   /*  60px */

  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-extrabold:800;

  --lh-tight:  1.2;
  --lh-snug:   1.35;
  --lh-normal: 1.6;
  --lh-relaxed:1.75;

  /* ── Espaciado (escala 8px) ────────────────────────────── */
  --space-1:  0.25rem;  /*  4px */
  --space-2:  0.5rem;   /*  8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
  --space-32: 8rem;     /* 128px */

  /* ── Bordes & radios ───────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full:9999px;

  /* ── Sombras ───────────────────────────────────────────── */
  --shadow-xs:  0 1px 3px rgba(8,50,98,0.08);
  --shadow-sm:  0 2px 8px rgba(8,50,98,0.10);
  --shadow-md:  0 4px 20px rgba(8,50,98,0.12);
  --shadow-lg:  0 8px 40px rgba(8,50,98,0.16);
  --shadow-xl:  0 16px 60px rgba(8,50,98,0.20);
  --shadow-card:0 4px 24px rgba(8,50,98,0.10);

  /* ── Transiciones ──────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;

  /* ── Layout ────────────────────────────────────────────── */
  --container-max:  1280px;
  --container-wide: 1440px;
  --navbar-height:  72px;
}