/* =============================================================================
   WaterProof WEB — Design tokens.
   Fuente: Figma "WaterProof WEB" (4rGGDGUAOkWzwKXELrcuuJ), variables reales
   extraídas con get_variable_defs (2026-08-06). Ver docs/informe_homologacion_figma.md.

   Tipografía: Plus Jakarta Sans (encabezados) + Inter (cuerpo/subtítulos),
   ambas self-hosted (sin CDN).
   ========================================================================== */

/* --- Plus Jakarta Sans (encabezados) --------------------------------------- */
@font-face { font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/PlusJakartaSans-400.woff2') format('woff2'); }
@font-face { font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/PlusJakartaSans-500.woff2') format('woff2'); }
@font-face { font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/PlusJakartaSans-600.woff2') format('woff2'); }
@font-face { font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/PlusJakartaSans-700.woff2') format('woff2'); }
@font-face { font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:800; font-display:swap; src:url('../fonts/PlusJakartaSans-800.woff2') format('woff2'); }

/* --- Inter (cuerpo / subtítulos) ------------------------------------------- */
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/Inter-400.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/Inter-500.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/Inter-600.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/Inter-700.woff2') format('woff2'); }

:root {
  /* --- Tipografía ---
     --wp-font       = encabezados (Plus Jakarta Sans)
     --wp-font-body  = cuerpo, subtítulos, UI (Inter) */
  --wp-font:      'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --wp-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* --- Paleta primaria (navy → cian) — valores REALES de Figma --------------- */
  --primary-900: #04314c;  /* navy base */
  --primary-800: #044269;  /* interpolado 900↔700 */
  --primary-700: #005c91;
  --primary-600: #1c7fb3;  /* interpolado 700↔500 */
  --primary-500: #37abda;  /* ACENTO azul (cian) */
  --primary-400: #6fa8e6;
  --primary-300: #8bb9d9;
  --primary-200: #d8eaf0;
  --primary-100: #ecf3f7;
  --primary-50:  #f3f8fb;

  /* --- Acento (alias del primary-500) — unificado -------------------------- */
  --blue:        #37abda;  /* acento = primary-500 */
  --blue-dark:   #005c91;  /* texto/íconos sobre fondo claro = primary-700 */
  --blue-light:  #ecf3f7;  /* fondo pálido de chips/íconos = primary-100 */

  /* --- Secundario / neutros / texto --- */
  --secondary-900: #07121e;
  --neutral-0:   #ffffff;
  --neutral-50:  #fafafa;
  --neutral-400: #98a2b3;
  --text:        #04314c;  /* texto principal = navy */
  --text-2:      #333333;
  --text-3:      #5b6b85;
  --muted:       #98a2b3;  /* Neutral/400 */
  --border:      #d9d9d9;  /* borde neutro genérico */
  --border-blue: #d8eaf0;  /* borde azulado sutil (primary-200) para cards */
  --white:       #ffffff;
  --bg:          #ffffff;

  /* --- Overlays (Figma) --- */
  --overlay-blue-09: #0b3d9117;
  --overlay-dark-20: #04314c33;
  --overlay-white-50: #ffffff80;

  /* --- Estados --- */
  --success:     #22ae5f;
  --warning:     #f59e0b;
  --error:       #dd4949;

  /* --- Espaciado (base 4px; Figma nombra p-N = N*4px) --- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;
  --p-4: var(--sp-4);

  /* --- Radios (Figma) --- */
  --rounded-sm:   4px;   /* rounded-DEFAULT */
  --rounded-md:   8px;
  --rounded-lg:   8px;   /* rounded-lg = 8 */
  --rounded-xl:   12px;
  --rounded-2xl:  16px;
  --rounded-3xl:  24px;
  --rounded-full: 9999px;

  /* --- Escala tipográfica (Figma) ---
     h1 46 / h2 40 / h3 32 / subtitle1 24 (Plus Jakarta)
     subtitle2 20 / body2 18 / body1 14 (Inter) */
  --fs-xs: 12px;  --fs-sm: 14px;  --fs-md: 16px;  --fs-lg: 18px;
  --fs-xl: 20px;  --fs-2xl: 24px; --fs-3xl: 32px; --fs-4xl: 40px; --fs-h1: 46px;

  /* --- Sombras --- */
  --shadow-sm: 0 1px 2px rgba(8,33,77,.06);
  --shadow-md: 0 4px 12px rgba(8,33,77,.10);
  --shadow-lg: 0 20px 48px -12px rgba(8,33,77,.18);
}