/* ==========================================================================
   SURESTIA — Design Tokens / Variables
   Paleta institucional derivada del logotipo:
   - Azul marino profundo (primario): #0B1D33
   - Dorado mate (secundario):        #C5A059
   - Blanco y gris cemento (soporte)
   Los tonos intermedios se generaron para cumplir contraste WCAG AA
   y reducir fatiga visual (fondos casi-blancos en vez de #FFF puro,
   texto gris oscuro en vez de negro puro).
   ========================================================================== */

:root {
  /* ---- Color primario (Azul marino) ---- */
  --color-navy-950: #08141F;
  --color-navy-900: #0B1D33; /* primario institucional */
  --color-navy-800: #132C4B;
  --color-navy-700: #1B3A63;
  --color-navy-600: #24497C;
  --color-navy-100: #E7ECF2;

  /* ---- Color secundario (Dorado mate) ---- */
  --color-gold-700: #7D5D2B; /* ajustado para contraste AA como texto sobre --color-gold-100 */
  --color-gold-600: #B8924C;
  --color-gold-500: #C5A059; /* secundario institucional */
  --color-gold-400: #D3B575;
  --color-gold-100: #F6EEDF;

  /* ---- Soporte: blanco y gris cemento ---- */
  --color-white: #FFFFFF;
  --color-cement-50: #F7F7F5;  /* fondo general (evita blanco puro) */
  --color-cement-100: #EFEFEB;
  --color-cement-200: #E2E1DB;
  --color-cement-300: #C9C8C0;
  --color-cement-700: #6B6B64;

  /* ---- Texto ---- */
  --color-text-body: #333B44;      /* gris carbón, no negro puro */
  --color-text-muted: #5B6470;
  --color-text-on-dark: #F3F4F1;
  --color-text-on-dark-muted: #B7C0CC;

  /* ---- Estados ---- */
  --color-success: #2E7D5B;
  --color-warning: #B8862F;
  --color-danger: #B23A3A;
  --color-focus: #3E7CB8;

  /* ---- Superficies ---- */
  --surface-page: var(--color-cement-50);
  --surface-card: var(--color-white);
  --surface-dark: var(--color-navy-900);

  /* ---- Tipografía ---- */
  --font-heading: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --fs-3xl: 2.85rem;

  --lh-tight: 1.2;
  --lh-normal: 1.6;

  /* ---- 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;

  /* ---- Bordes / sombras ---- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 3px rgba(11, 29, 51, 0.08);
  --shadow-md: 0 8px 24px rgba(11, 29, 51, 0.10);
  --shadow-lg: 0 16px 40px rgba(11, 29, 51, 0.16);

  /* ---- Layout ---- */
  --container-max: 1200px;
  --header-height: 76px;

  /* ---- Transiciones ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 150ms var(--ease);
  --transition-base: 250ms var(--ease);
}