/**
 * ============================================================================
 * GORILLA NUTRITION SINALOA - Variables CSS
 * ============================================================================
 *
 * Sistema de diseño: Variables globales (custom properties) utilizadas en
 * todo el tema. Centraliza colores, fuentes, espaciado, transiciones y
 * z-index para mantener consistencia visual.
 *
 * @package Gorilla_Nutrition
 * @since   1.0.0
 */

:root {
  /* ─── Paleta de Colores ─────────────────────────────────────────────── */

  /** Color de fondo principal (negro profundo) */
  --color-bg-primary:     #070707;
  /** Fondo secundario (ligeramente más claro) */
  --color-bg-secondary:   #0b0b0b;
  /** Fondo terciario para cards y elementos */
  --color-bg-card:        #111111;
  /** Fondo para áreas de imagen en cards */
  --color-bg-card-inner:  #161616;
  /** Fondo del footer */
  --color-bg-footer:      #040404;

  /** Dorado principal (acento premium) */
  --color-gold:           #C9A94F;
  /** Dorado oscuro (para gradientes) */
  --color-gold-dark:      #8a6820;
  /** Dorado medio */
  --color-gold-mid:       #a07830;
  /** Dorado claro (para gradientes) */
  --color-gold-light:     #F0D060;

  /** Rojo principal (CTA, acentos de acción) */
  --color-red:            #D42020;
  /** Azul (acento terciario, detalles) */
  --color-blue:           #1B3D9F;
  /** Verde WhatsApp */
  --color-whatsapp:       #25D366;

  /** Texto principal (crema claro) */
  --color-text-primary:   #F2EDE4;
  /** Texto secundario */
  --color-text-secondary: #8a8580;
  /** Texto terciario (subtextos, labels) */
  --color-text-muted:     #6a6560;
  /** Texto oscuro (muy sutil) */
  --color-text-dark:      #555555;
  /** Texto extra oscuro */
  --color-text-darker:    #484440;
  /** Texto de links en footer */
  --color-text-footer:    #333333;

  /** Borde sutil dorado */
  --color-border-gold:    rgba(201, 169, 79, 0.1);
  /** Borde sutil blanco */
  --color-border-light:   rgba(255, 255, 255, 0.05);

  /* ─── Tipografía ────────────────────────────────────────────────────── */

  /** Fuente display (títulos grandes, headings) */
  --font-display:  'Bebas Neue', sans-serif;
  /** Fuente body (textos, párrafos, UI) */
  --font-body:     'Montserrat', sans-serif;

  /* ─── Espaciado ─────────────────────────────────────────────────────── */

  /** Padding horizontal del contenedor principal */
  --container-padding:   72px;
  /** Ancho máximo del contenido */
  --container-max-width: 1300px;
  /** Altura del navbar */
  --nav-height:          78px;

  /* ─── Transiciones ──────────────────────────────────────────────────── */

  /** Transición estándar para hover y estados */
  --transition-base:   all 0.3s ease;
  /** Transición para hover en cards */
  --transition-card:   all 0.4s ease;
  /** Curva de easing para scroll reveal */
  --ease-reveal:       cubic-bezier(0.16, 1, 0.3, 1);

  /* ─── Z-Index Layers ────────────────────────────────────────────────── */

  /** Fondo de secciones */
  --z-bg:            0;
  /** Overlays y grids decorativos */
  --z-overlay:       1;
  /** Canvas de partículas */
  --z-particles:     2;
  /** Contenido principal */
  --z-content:       3;
  /** Elementos destacados sobre contenido */
  --z-above:         5;
  /** Navbar fijo */
  --z-nav:           1000;
  /** Botón flotante WhatsApp */
  --z-float:         9999;

  /* ─── Border Radius ─────────────────────────────────────────────────── */

  --radius-sm:  2px;
  --radius-md:  3px;
  --radius-lg:  4px;
  --radius-full: 50%;
}