/* ==========================================================================
   VARIABLES Y DESIGN TOKENS — CONSTRUCCIONES JGP2410 C.A.
   Fuente de verdad: MASTER_CONTEXT.md y docs/DESIGN_SYSTEM.md
   ========================================================================== */

:root {
  /* --- Paleta de Colores Oficial --- */
  --color-primary-blue:      #0B2A6F; /* Azul Principal: confianza y solidez empresarial */
  --color-deep-blue:         #081D4D; /* Azul Profundo: fondos institucionales, cabeceras, pie */
  --color-yellow:            #FFC20E; /* Amarillo Principal: acción, contraste, señalización */
  --color-yellow-hover:      #E5AC00; /* Amarillo Hover: estado activo de interacción */
  --color-gray-light:        #F3F4F6; /* Gris Claro: fondos alternados de sección y tarjetas */
  --color-gray-dark:         #1F2937; /* Gris Oscuro: tipografía principal de alto contraste */

  /* --- Colores de Apoyo y Superficies --- */
  --color-white:             #FFFFFF;
  --color-gray-border:       #E5E7EB; /* Bordes estructurales neutros */
  --color-gray-muted:        #4B5563; /* Textos secundarios y metadatos */
  --color-dark-surface:      #051333; /* Fondos ultra oscuros */
  
  /* --- Canales Funcionales --- */
  --color-whatsapp:          #25D366; /* Verde oficial de WhatsApp */
  --color-whatsapp-hover:    #1EBE5D;

  /* --- Familias Tipográficas con Fallbacks de Sistema Robustos --- */
  --font-headings: 'Barlow Condensed', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-body:     'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* --- Pesos Tipográficos Oficiales --- */
  --font-weight-regular:     400;
  --font-weight-medium:      500;
  --font-weight-bold:        700;
  --font-weight-extrabold:   800;

  /* --- Escala Tipográfica Fluida con clamp() --- */
  --font-size-hero:  clamp(2.25rem, 5vw + 1rem, 4.25rem);
  --font-size-h1:    clamp(1.85rem, 3.5vw + 1rem, 3.25rem);
  --font-size-h2:    clamp(1.6rem, 2.5vw + 0.5rem, 2.5rem);
  --font-size-h3:    clamp(1.25rem, 1.8vw + 0.25rem, 1.75rem);
  --font-size-h4:    clamp(1.1rem, 1.2vw + 0.2rem, 1.35rem);
  --font-size-lead:  clamp(1.05rem, 1vw + 0.4rem, 1.2rem);
  --font-size-body:  1rem;        /* 16px */
  --font-size-sm:    0.875rem;    /* 14px */
  --font-size-xs:    0.75rem;     /* 12px */

  /* --- Alturas de Línea --- */
  --line-height-tight:   1.15;
  --line-height-snug:    1.3;
  --line-height-normal:  1.6;

  /* --- Sistema de Espaciado Modular --- */
  --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 */

  /* --- Contenedores --- */
  --container-max-width:      1200px;
  --container-wide-max-width: 1400px;
  --container-padding:        clamp(1rem, 4vw, 2.5rem);

  /* --- Radios de Borde (Estética Industrial y Sobria) --- */
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-full: 9999px;

  /* --- Sombras Funcionales (Sin Exageraciones) --- */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 12px rgba(8, 29, 77, 0.08);
  --shadow-lg: 0 8px 24px rgba(8, 29, 77, 0.12);
  --shadow-cta: 0 4px 14px rgba(255, 194, 14, 0.35);

  /* --- Transiciones y Curvas de Aceleración --- */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;

  /* --- Niveles de Elevación (z-index) --- */
  --z-base:      1;
  --z-dropdown:  50;
  --z-header:    100;
  --z-mobile-nav: 200;
  --z-floating:  300;
}