/**
 * variables.css - Variables globales de Arrayanmed
 * Este archivo contiene todas las variables CSS que definen los colores,
 * espaciados, sombras y gradientes del sitio. Al centralizar estos valores,
 * es muy fácil mantener la consistencia visual y hacer cambios globales.
 */

:root {
    /* ========== COLORES PRINCIPALES ========== */
    /* Fondos base */
    --bg-cream: #f3f4e6;        /* Fondo crema suave para el body */
    --bg-white: #ffffff;        /* Blanco puro para cards y secciones */
    
    /* Colores primarios - Verde Arrayán */
    --primary-green: #98aa71;   /* Verde principal del logo */
    --primary-dark: #7a8d5a;    /* Verde oscuro para hover y énfasis */
    
    /* Colores de acento - Dorado */
    --accent-gold: #e6c757;     /* Dorado para elementos destacados */
    --accent-light: #f0dc84;    /* Dorado claro para gradientes */
    
    /* ========== COLORES DE TEXTO ========== */
    --text-dark: #2c2c2c;       /* Texto principal y títulos */
    --text-medium: #5a5a5a;     /* Texto secundario y descripciones */
    --text-light: #8a8a8a;      /* Texto terciario y placeholders */
    
    /* ========== BORDES Y LÍNEAS ========== */
    --border-light: #e8e8e8;    /* Bordes sutiles para separación */
    
    /* ========== SOMBRAS ========== */
    /* Sombras progresivas para crear profundidad */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);      /* Sombra pequeña */
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);     /* Sombra mediana */
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.12);    /* Sombra grande */
    
    /* ========== GRADIENTES ========== */
    /* Gradientes para botones y elementos destacados */
    --gradient-primary: linear-gradient(135deg, var(--primary-green) 0%, var(--primary-dark) 100%);
    --gradient-accent: linear-gradient(135deg, var(--accent-gold) 0%, var(--accent-light) 100%);
    
    /* ========== ESPACIADOS ========== */
    /* Sistema de espaciado consistente */
    --spacing-xs: 0.25rem;      /* 4px */
    --spacing-sm: 0.5rem;       /* 8px */
    --spacing-md: 1rem;         /* 16px */
    --spacing-lg: 1.5rem;       /* 24px */
    --spacing-xl: 2rem;         /* 32px */
    --spacing-2xl: 3rem;        /* 48px */
    --spacing-3xl: 4rem;        /* 64px */
    
    /* ========== TAMAÑOS DE FUENTE ========== */
    /* Escala tipográfica modular */
    --font-xs: 0.75rem;         /* 12px */
    --font-sm: 0.875rem;        /* 14px */
    --font-base: 1rem;          /* 16px */
    --font-lg: 1.125rem;        /* 18px */
    --font-xl: 1.25rem;         /* 20px */
    --font-2xl: 1.5rem;         /* 24px */
    --font-3xl: 1.875rem;       /* 30px */
    --font-4xl: 2.25rem;        /* 36px */
    --font-5xl: 3rem;           /* 48px */
    
    /* ========== TRANSICIONES ========== */
    /* Duraciones consistentes para animaciones */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.4s ease;
    --transition-slower: 0.6s ease;
    
    /* ========== BORDER RADIUS ========== */
    /* Radios de borde consistentes */
    --radius-sm: 0.375rem;      /* 6px */
    --radius-md: 0.5rem;        /* 8px */
    --radius-lg: 1rem;          /* 16px */
    --radius-xl: 1.5rem;        /* 24px */
    --radius-2xl: 2rem;         /* 32px */
    --radius-full: 9999px;      /* Círculo perfecto */
    
    /* ========== Z-INDEX ========== */
    /* Capas de apilamiento */
    --z-negative: -1;
    --z-normal: 1;
    --z-tooltip: 10;
    --z-sticky: 100;
    --z-fixed: 1000;
    --z-modal: 1100;
    
    /* ========== BREAKPOINTS ========== */
    /* Puntos de quiebre para responsive */
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;
}

/* ========== MODO OSCURO (Futuro) ========== */
/* Preparado para implementar modo oscuro */
@media (prefers-color-scheme: dark) {
    :root {
        /* Aquí se pueden definir variables para modo oscuro cuando se implemente */
    }
}

/* ========== UTILIDADES DE COLOR ========== */
/* Clases utilitarias para aplicar colores rápidamente */
.text-primary { color: var(--primary-green); }
.text-accent { color: var(--accent-gold); }
.text-dark { color: var(--text-dark); }
.text-medium { color: var(--text-medium); }
.text-light { color: var(--text-light); }

.bg-cream { background-color: var(--bg-cream); }
.bg-white { background-color: var(--bg-white); }
.bg-primary { background-color: var(--primary-green); }
.bg-accent { background-color: var(--accent-gold); }