/* ==========================================================================
   BANGESA – Design Tokens
   Extraídos de las capturas en img/referencia/
   ========================================================================== */

:root {
  /* Colores de marca */
  --color-primary:       #d84b37;   /* rojo-naranja BANGESA */
  --color-primary-dark:  #b93a28;
  --color-primary-light: #e8705f;
  --color-primary-section: #c7402d; /* fondo de secciones rojas: texto blanco ≥ 4.5:1 (AA) */
  --color-primary-rgb:   216, 75, 55;

  /* Neutros */
  --color-charcoal:      #3a3a3a;   /* header / sección "forma de trabajar" */
  --color-charcoal-deep: #2e2e2e;   /* panel de contacto */
  --color-navy-deep:     #1c1e2e;   /* barra inferior del footer */

  /* Texto */
  --color-heading:       #3a3a3a;
  --color-text:          #4b4b4b;
  --color-text-muted:    #6b6b6b;
  --color-text-inverse:  #ffffff;

  /* Fondos */
  --color-bg:            #ffffff;
  --color-bg-alt:        #f3f3f3;

  /* UI */
  --color-border:        #dcdcdc;
  --color-overlay:       rgba(28, 30, 46, 0.72);

  /* Estados (valores con contraste AA sobre fondo oscuro/claro) */
  --color-success:       #22c55e;
  --color-error:         #ef4444;
  --color-error-on-dark: #ffb4a9;

  /* Tipografía (Montserrat ≈ Gotham) */
  --font-primary: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-heading: var(--font-primary);

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;

  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  --font-regular:  400;
  --font-semibold: 600;
  --font-bold:     700;

  /* Espaciado */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* Bordes */
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   1rem;
  --radius-pill: 9999px;

  /* Sombras */
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 14px 40px rgba(0, 0, 0, 0.28);

  /* Transiciones */
  --transition-fast:   150ms ease;
  --transition-normal: 300ms ease;

  /* Z-index */
  --z-raised: 10;
  --z-fixed:  200;

  /* Layout */
  --container-max:     1200px;
  --container-padding: 1.25rem;
  --navbar-height:     64px;
}

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

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