/* ============================================
   CAB GLOBAL — Design Tokens
   --------------------------------------------
   Variables centralizadas del sistema de diseño.
   Todo componente debe consumir de aquí.
   ============================================ */

:root {
    /* ========================================
       COLOR · Paleta base
       ======================================== */
    --color-green:        #00c92c;
    --color-green-light:  #00e032;
    --color-green-glow:   rgba(0, 201, 44, 0.3);
    --color-dark:         #0B1829;
    --color-dark-deep:    #000000;
    --color-navy:         #0D1F3C;
    --color-navy-band:    #111d40;
    --color-gray-dark:    #2D2D2D;
    --color-gray-mid:     #4a4a4a;
    --color-gray-light:   #e8e8e8;
    --color-white:        #ffffff;

    /* ========================================
       COLOR · Semántico (para componentes)
       ======================================== */
    --color-text:            var(--color-white);
    --color-text-muted:      rgba(255, 255, 255, 0.6);
    --color-text-on-light:   var(--color-dark);
    --color-bg:              var(--color-dark-deep);
    --color-bg-alt:          var(--color-dark);

    /* ========================================
       SURFACES · 3 niveles de profundidad
       (ritmo visual sin romper el ADN dark)
       - surface-0 → impacto (hero, servicios, CTA)
       - surface-1 → contenido (valores, proceso)
       - surface-2 → respiro (nosotros, logística, clientes)
       ======================================== */
    --surface-0: var(--color-dark-deep);
    --surface-1: var(--color-dark);
    --surface-2: var(--color-navy);

    /* ========================================
       DYNAMIC TEXT · se interpolan en JS según
       el fondo que muestra el body (scroll-driven)
       ======================================== */
    --text-strong: var(--color-white);
    --text-muted:  rgba(255, 255, 255, 0.6);

    /* ========================================
       DYNAMIC CARDS · mismo principio: las cards
       usan el color opuesto al fondo con alpha,
       para que se vean bien sobre claro u oscuro.
       ======================================== */
    --card-bg:     rgba(255, 255, 255, 0.04);
    --card-border: rgba(255, 255, 255, 0.10);
    --color-border:          rgba(255, 255, 255, 0.12);
    --color-accent:          var(--color-green);
    --color-accent-contrast: var(--color-dark-deep);

    /* ========================================
       TYPOGRAPHY · Familia
       ======================================== */
    --font-family:      'Montserrat', system-ui, -apple-system, sans-serif;
    --font-display:     'Bebas Neue', 'Impact', 'Oswald', sans-serif;

    /* ========================================
       TYPOGRAPHY · Tamaños (3 niveles)
       display → títulos grandes / heros (responsivo)
       title   → subtítulos / card titles
       body    → texto corrido / párrafos / labels
       ======================================== */
    --text-display: clamp(36px, 5vw, 64px);
    --text-title:   20px;
    --text-body:    18px;

    /* ========================================
       TYPOGRAPHY · Line heights por nivel
       ======================================== */
    --leading-display: 1.1;
    --leading-title:   1.3;
    --leading-body:    1.7;

    /* ========================================
       TYPOGRAPHY · Pesos
       ======================================== */
    --weight-light:     300;
    --weight-regular:   400;
    --weight-semibold:  600;
    --weight-bold:      700;
    --weight-black:     900;

    /* ========================================
       TYPOGRAPHY · Line heights genéricos (legacy/interfaz)
       ======================================== */
    --leading-tight:   1.1;
    --leading-snug:    1.3;
    --leading-normal:  1.6;
    --leading-relaxed: 1.7;

    /* ========================================
       SPACING · Escala (base 4px)
       ======================================== */
    --space-0:   0;
    --space-1:   4px;
    --space-2:   8px;
    --space-3:   12px;
    --space-4:   16px;
    --space-5:   20px;
    --space-6:   24px;
    --space-8:   32px;
    --space-10:  40px;
    --space-12:  48px;
    --space-16:  64px;
    --space-20:  80px;
    --space-24:  96px;
    --space-30:  120px;

    /* ========================================
       RADIUS · Esquinas redondeadas
       ======================================== */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   24px;
    --radius-full: 9999px;

    /* ========================================
       SHADOWS
       ======================================== */
    --shadow-sm:    0 2px 8px rgba(0, 0, 0, 0.15);
    --shadow-md:    0 8px 24px rgba(0, 0, 0, 0.20);
    --shadow-lg:    0 16px 48px rgba(0, 0, 0, 0.25);
    --shadow-xl:    0 30px 80px rgba(0, 0, 0, 0.35);
    --shadow-glow:  0 8px 30px var(--color-green-glow);

    /* ========================================
       TRANSITIONS
       ======================================== */
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 0.3s  cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s  cubic-bezier(0.4, 0, 0.2, 1);

    /* ========================================
       LAYOUT
       ======================================== */
    --max-width:    1400px;
    --section-pad:  clamp(80px, 10vh, 120px);

    /* ========================================
       BOTÓN · Tokens específicos del componente
       ======================================== */
    --btn-font-family:  var(--font-family);
    --btn-font-weight:  var(--weight-bold);
    --btn-radius:       var(--radius-sm);
    --btn-transition:   var(--transition-base);

    /* Tamaños */
    --btn-padding-sm:   12px 28px;
    --btn-padding-md:   16px 36px;
    --btn-padding-lg:   20px 44px;
    --btn-text-sm:      14px;
    --btn-text-md:      16px;
    --btn-text-lg:      18px;

    /* Variante: primary */
    --btn-primary-bg:          var(--color-green);
    --btn-primary-color:       var(--color-dark-deep);
    --btn-primary-bg-hover:    var(--color-green);
    --btn-primary-shadow:      var(--shadow-glow);

    /* Variante: secondary (dark) */
    --btn-secondary-bg:        var(--color-dark);
    --btn-secondary-color:     var(--color-white);
    --btn-secondary-border:    var(--color-dark);
    --btn-secondary-bg-hover:  var(--color-green);
    --btn-secondary-color-hover: var(--color-dark-deep);

    /* Variante: ghost */
    --btn-ghost-bg:            transparent;
    --btn-ghost-color:         var(--color-white);
    --btn-ghost-border:        rgba(255, 255, 255, 0.3);
    --btn-ghost-color-hover:   var(--color-green);
    --btn-ghost-border-hover:  var(--color-green);
}