/* ========================================
   SISTEMA DE VARIABLES CSS ESTRUCTURALES
   ======================================== */

/* 
   IMPORTANTE: Este archivo debe usarse SIEMPRE junto con un archivo de tema.
   Los colores se definen en los archivos de tema (css/themes/*.css)
   
   Uso correcto:
   <link rel="stylesheet" href="css/variables.css">
   <link rel="stylesheet" href="css/themes/verde.css">
*/

:root {
  /* ===== ESTRUCTURA DE VARIABLES ===== */
  /* 
     Las siguientes variables serán definidas por los archivos de tema:
     
     COLORES PRINCIPALES:
     --color-primary
     --color-primary-hover
     --color-primary-dark
     --color-primary-light
     --color-secondary
     --color-secondary-hover
     --color-secondary-light
     
     COLORES DE FONDO:
     --color-bg-primary
     --color-bg-secondary
     --color-bg-accent
     
     COLORES DE ACENTO:
     --color-accent
     --color-accent-hover
     --color-accent-light
     
     COLORES DE ESTADO:
     --color-success
     --color-success-light
     --color-success-bg
     --color-error
     --color-error-light
     --color-error-bg
     --color-info
     --color-info-light
     --color-info-bg
     
     TRANSPARENCIAS:
     --color-alpha-light
     --color-alpha-medium
     --color-alpha-strong
     --color-alpha-overlay
     --color-overlay-dark
     
     GRADIENTES:
     --gradient-primary
     --gradient-soft
     --gradient-intense
     --gradient-radial
     --gradient-overlay
     --gradient-whatsapp
     
     SOMBRAS:
     --shadow-soft
     --shadow-medium
     --shadow-strong
     --shadow-glow
  */
}

/* ========================================
   CLASES UTILITARIAS MODERNAS
   ======================================== */

/* Colores de texto */
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-primary-dark { color: var(--color-primary-dark); }

/* Colores de fondo */
.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-soft { background-color: var(--color-bg-primary); }
.bg-accent { background-color: var(--color-bg-secondary); }
.bg-overlay-dark { background-color: var(--color-overlay-dark); }

/* Gradientes */
.gradient-primary { background: var(--gradient-primary); }
.gradient-soft { background: var(--gradient-soft); }
.gradient-intense { background: var(--gradient-intense); }
.gradient-whatsapp { background: var(--gradient-whatsapp); }

/* Bordes */
.border-primary { border-color: var(--color-primary); }
.border-secondary { border-color: var(--color-secondary); }

/* Sombras */
.shadow-soft { box-shadow: var(--shadow-soft); }
.shadow-medium { box-shadow: var(--shadow-medium); }
.shadow-strong { box-shadow: var(--shadow-strong); }
.shadow-glow { box-shadow: var(--shadow-glow); }

/* ========================================
   EFECTOS HOVER PROFESIONALES
   ======================================== */

.hover-primary:hover { 
  background-color: var(--color-primary-hover);
  transform: translateY(-1px);
  transition: all 0.3s ease;
}

.hover-secondary:hover { 
  background-color: var(--color-secondary-hover);
  transform: translateY(-1px);
  transition: all 0.3s ease;
}

.hover-gradient:hover {
  background: var(--gradient-intense);
  transform: translateY(-2px);
  box-shadow: var(--shadow-strong);
  transition: all 0.3s ease;
}

.hover-glow:hover {
  box-shadow: var(--shadow-glow);
  transition: all 0.3s ease;
}

/* ========================================
   COMPONENTES ESPECIALIZADOS
   ======================================== */

/* Botones profesionales */
.btn-primary {
  background: var(--gradient-primary);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-weight: 600;
  box-shadow: var(--shadow-medium);
  transition: all 0.3s ease;
}

.btn-primary:hover {
  background: var(--gradient-intense);
  transform: translateY(-2px);
  box-shadow: var(--shadow-strong);
}

/* Cards con gradiente */
.card-gradient {
  background: var(--gradient-soft);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
  transition: all 0.3s ease;
}

.card-gradient:hover {
  box-shadow: var(--shadow-medium);
  transform: translateY(-2px);
}