/* ============================================================
 * Archivo: base/variables.css
 * Descripción: Define las variables globales (Custom Properties)
 *              para colores, tipografía, sombras y transiciones.
 * ============================================================ */

:root {
    /* Paleta de colores principal */
    --color-primario: #48b4aa;
    --color-primario-hover: #317a73;
    --color-primario-claro: #81ccc6;
    --color-secundario: #81ccc6;
    --color-secundario-hover: #48b4aa;
    
    /* Colores de fondo */
    --color-fondo: #f6fbfb;
    --color-blanco: #ffffff;
    --color-fondo-oscuro: #193f3c;
    --color-superficie: #eef8f7;
    --color-superficie-elevada: #ffffff;
    
    /* Colores de texto */
    --color-texto: #193f3c;
    --color-texto-secundario: #317a73;
    --color-texto-claro: #bce4e0;
    --color-texto-muted: #5f7f7b;
    
    /* Colores de estado (Adaptados a la paleta o semánticos) */
    --color-exito: #28A745;
    --color-error: #DC3545;
    --color-advertencia: #FFC107;
    --color-info: #17A2B8;
    
    /* Bordes y sombras */
    --color-borde: #bce4e0;
    --sombra-suave: 0 4px 14px rgba(25, 63, 60, 0.08);
    --sombra-media: 0 10px 26px rgba(25, 63, 60, 0.12);
    --sombra-fuerte: 0 18px 42px rgba(25, 63, 60, 0.16);
    
    /* Bordes redondeados */
    --radio-sm: 6px;
    --radio-md: 8px;
    --radio-lg: 12px;
    --radio-xl: 18px;
    
    /* Transiciones */
    --transicion: all 0.22s ease;
    
    /* Fuentes */
    --fuente-cuerpo: 'Inter', Arial, sans-serif;
    --fuente-encabezados: 'Manrope', 'Inter', Arial, sans-serif;
    --fuente-logo: 'Manrope', 'Inter', Arial, sans-serif;
}