/* ==========================================================================
   JAMI ENVÍOS - DESIGN SYSTEM TOKENS
   Paleta sobria, moderna y profesional para transporte marítimo España -> RD
   Fácil de editar y adaptar a la guía de marca oficial.
   ========================================================================== */

:root {
  /* ==========================================================================
     PALETA DE MARCA OFICIAL: AZUL Y ROJO (JAMI ENVÍOS)
     ========================================================================== */
  /* Azul Marino & Azul Marítimo */
  --color-blue-dark: #0A2540;          /* Azul marino profundo (solidez y confianza) */
  --color-blue-navy: #07182B;          /* Azul noche profundo para footers y barras */
  --color-blue-primary: #12375F;       /* Azul marino medio para hovers */
  --color-blue-vibrant: #1D4ED8;       /* Azul marítimo institucional */
  --color-blue-soft: #EFF6FF;          /* Fondo suave azul para tarjetas */
  --color-blue-border: #BFDBFE;        /* Borde suave azul */

  /* Rojo JAMI Oficial */
  --color-red-primary: #DC2626;        /* Rojo oficial JAMI (combina con el logo) */
  --color-red-dark: #B91C1C;           /* Rojo carmesí para hovers y botones */
  --color-red-hover: #991B1B;          /* Hover interactivo rojo */
  --color-red-soft: #FEF2F2;           /* Fondo suave rojo */
  --color-red-border: #FECACA;         /* Borde sutil rojo */

  /* Degradados y Detalles de Identidad */
  --color-brand-bar: linear-gradient(90deg, #0A2540 0%, #0A2540 50%, #DC2626 50%, #DC2626 100%);
  --color-brand-gradient: linear-gradient(135deg, #0A2540 0%, #1D4ED8 100%);

  /* Marca & Mapeo del Design System */
  --color-primary: #0A2540;            /* Azul marino como color principal */
  --color-primary-light: #12375F;      /* Azul marino medio */
  --color-primary-dark: #07182B;       /* Fondo oscuro azul noche */
  
  --color-secondary: #1D4ED8;          /* Azul marítimo vibrante */
  --color-secondary-light: #EFF6FF;    /* Azul suave */
  
  --color-accent: #DC2626;             /* Rojo JAMI para llamadas a la acción */
  --color-accent-hover: #B91C1C;       /* Hover rojo */
  --color-accent-soft: #FEF2F2;        /* Fondo rojizo suave */

  /* Verificación y Marcadores de Estado */
  --color-warning: #D97706;        /* Ámbar para elementos pendientes de confirmación */
  --color-warning-light: #FEF3C7;
  --color-success: #15803D;        /* Verde éxito para confirmaciones */
  --color-success-light: #DCFCE7;
  --color-whatsapp: #25D366;       /* Verde oficial WhatsApp */
  --color-whatsapp-hover: #20BD5A;

  /* Superficies y Neutros */
  --color-bg: #F8FAFC;             /* Fondo general de la página (slate limpio) */
  --color-surface: #FFFFFF;        /* Superficie de tarjetas y cajas */
  --color-surface-muted: #F1F5F9;  /* Fondos alternados y elementos secundarios */
  --color-border: #E2E8F0;         /* Bordes limpios y sutiles */
  --color-border-focus: #2563EB;   /* Borde de foco accesible */

  /* Tipografía & Textos */
  --color-text-main: #0F172A;      /* Texto de máxima legibilidad (slate 900) */
  --color-text-muted: #475569;     /* Texto secundario y descriptivo (slate 600) */
  --color-text-light: #94A3B8;     /* Texto terciario (slate 400) */
  --color-text-inverse: #FFFFFF;   /* Texto sobre fondo oscuro */

  /* Tipografía */
  --font-family-base: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-3xl: 1.875rem;  /* 30px */
  --font-size-4xl: 2.25rem;   /* 36px */
  --font-size-5xl: 3rem;      /* 48px */

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Espaciado & Layout */
  --spacing-1: 0.25rem;   /* 4px */
  --spacing-2: 0.5rem;    /* 8px */
  --spacing-3: 0.75rem;   /* 12px */
  --spacing-4: 1rem;      /* 16px */
  --spacing-5: 1.25rem;   /* 20px */
  --spacing-6: 1.5rem;    /* 24px */
  --spacing-8: 2rem;      /* 32px */
  --spacing-10: 2.5rem;   /* 40px */
  --spacing-12: 3rem;     /* 48px */
  --spacing-16: 4rem;     /* 64px */
  --spacing-20: 5rem;     /* 80px */

  --max-width-container: 1240px;
  --max-width-narrow: 860px;

  /* Radios de borde */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Sombras precisas y modernas */
  --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
  --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
  --shadow-floating: 0 14px 30px rgba(0, 0, 0, 0.18);

  /* Transiciones */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 350ms cubic-bezier(0.16, 1, 0.3, 1);
}