/* css/variables.css */
:root {
    /* Paleta de Colores (Basada en el logo) */
    --color-primary: #E61A23; /* Rojo Zumaya */
    --color-primary-dark: #B31018; /* Rojo más oscuro para hovers */
    --color-secondary: #3b2c28; /* Marrón oscuro / Negro de los animales */
    --color-secondary-light: #5a453f; /* Marrón un poco más claro */
    
    --color-text-main: #333333; /* Texto general */
    --color-text-muted: #666666; /* Texto secundario */
    
    --color-bg-main: #FFFFFF; /* Fondo principal */
    --color-bg-light: #F9F9F9; /* Fondo secundario claro (gris muy tenue) */
    --color-bg-dark: #1A1A1A; /* Fondo oscuro (ej. Footer) */

    /* Tipografía */
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Roboto', sans-serif;

    /* Sombras y transiciones */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 8px rgba(0,0,0,0.12);
    --shadow-lg: 0 10px 20px rgba(0,0,0,0.15);
    
    --transition-fast: 0.2s ease-in-out;
    --transition-normal: 0.3s ease-in-out;

    /* Border Radius */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
}