/* variables-hgw.css - Variables CSS para sistema HGW */

:root {
    /* Colores principales HGW */
    --hgw-vitalidad: #10B981;      /* Verde principal */
    --hgw-armonia: #047857;       /* Verde oscuro */
    --hgw-energia: #059669;       /* Verde medio */
    --hgw-calma: #0EA5E9;        /* Azul claro */
    --hgw-pasion: #EC4899;       /* Rosa */
    --hgw-alegria: #F59E0B;      /* Naranja */
    --hgw-pureza: #8B5CF6;       /* Púrpura */
    
    /* Colores funcionales (para compatibilidad) */
    --primary: var(--hgw-armonia);
    --secondary: var(--hgw-vitalidad);
    --accent: var(--hgw-energia);
    --success: #25D366;
    --warning: var(--hgw-alegria);
    --info: var(--hgw-calma);
    --danger: #ef4444;
    --light: #f8f9fa;
    --dark: #1f2937;
    
    /* Sombras */
    --shadow-sm: 0 2px 10px rgba(16, 185, 129, 0.1);
    --shadow-md: 0 5px 20px rgba(16, 185, 129, 0.15);
    --shadow-lg: 0 10px 30px rgba(16, 185, 129, 0.2);
    
    /* Bordes redondeados */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-full: 9999px;
    
    /* Espaciado */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
}

/* Clases de utilidad para colores HGW */
.text-hgw-vitalidad { color: var(--hgw-vitalidad); }
.text-hgw-armonia { color: var(--hgw-armonia); }
.text-hgw-energia { color: var(--hgw-energia); }
.bg-hgw-vitalidad { background: var(--hgw-vitalidad); }
.bg-hgw-armonia { background: var(--hgw-armonia); }
.bg-hgw-energia { background: var(--hgw-energia); }