/* ==========================================================================
   INDUSTRIAS GESA – Design Tokens
   Fuente única de verdad para el sistema de diseño
   ========================================================================== */

:root {
  /* ========================================
     COLORES
     ======================================== */

  /* Primario – Azul Industrias GESA */
  --color-primary:     #315B9E;
  --color-primary-dark: #244a87;
  --color-primary-light: #4a72b5;
  --color-primary-rgb:  49, 91, 158;

  /* Acento – Ámbar / Dorado */
  --color-accent:      #E8A020;
  --color-accent-dark: #c98815;
  --color-accent-light: #f0b84a;
  --color-accent-rgb:  232, 160, 32;

  /* Texto */
  --color-heading:      #1a2744;
  --color-text:         #4b5563;
  --color-text-muted:   #9ca3af;
  --color-text-inverse: #ffffff;
  --color-text-dark:    #1a2744;

  /* Fondos */
  --color-bg:        #ffffff;
  --color-bg-alt:    #f4f6f9;
  --color-bg-silver: #e8eaed;
  --color-bg-dark:   #1a2744;

  /* UI */
  --color-border:  #e5e7eb;
  --color-overlay: rgba(26, 39, 68, 0.60);

  /* Estados */
  --color-success: #22c55e;
  --color-error:   #ef4444;
  --color-warning: #f59e0b;

  /* ========================================
     TIPOGRAFÍA – solo sans-serif
     ======================================== */

  --font-heading: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                  'Helvetica Neue', Arial, sans-serif;
  --font-body:    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                  'Helvetica Neue', Arial, sans-serif;

  /* Tamaños – Mobile First */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */
  --text-6xl:  3.75rem;    /* 60px */

  /* Line Heights */
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* Font Weights */
  --font-regular:  400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  /* ========================================
     ESPACIADO
     ======================================== */

  --space-xs:  0.25rem;   /* 4px  */
  --space-sm:  0.5rem;    /* 8px  */
  --space-md:  1rem;      /* 16px */
  --space-lg:  1.5rem;    /* 24px */
  --space-xl:  2rem;      /* 32px */
  --space-2xl: 3rem;      /* 48px */
  --space-3xl: 4rem;      /* 64px */
  --space-4xl: 6rem;      /* 96px */

  /* ========================================
     BORDES
     ======================================== */

  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   1rem;
  --radius-xl:   1.5rem;
  --radius-2xl:  2rem;
  --radius-pill: 9999px;

  /* ========================================
     SOMBRAS
     ======================================== */

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.10);
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.12);
  --shadow-xl: 0 20px 50px rgba(0,0,0,0.16);

  /* ========================================
     TRANSICIONES
     ======================================== */

  --transition-fast:   150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow:   500ms ease;

  /* ========================================
     Z-INDEX
     ======================================== */

  --z-below:    -1;
  --z-base:      0;
  --z-raised:    10;
  --z-dropdown:  100;
  --z-fixed:     200;
  --z-modal:     300;

  /* ========================================
     LAYOUT / CONTENEDOR
     ======================================== */

  --container-max:     1280px;
  --container-padding: 1.25rem;

  /* Navbar */
  --navbar-height:  72px;
  --navbar-top-gap: 1rem;
}

@media (min-width: 768px) {
  :root {
    --container-padding: 2rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --container-padding: 2.5rem;
    --navbar-height:  80px;
    --navbar-top-gap: 1.25rem;
  }
}