:root {
    --color-dark-primary: #2A3340;    /* Azul/Negro Profundo (Roca/Texto) */
    --color-accent-river: #40808C;    /* Azul Turquesa (Río) */
    --color-background: #F3EEE5;      /* Crema Suave (Fondo) */
    --color-dark-secondary: #1E252E;  /* Gris/Negro Oscuro (Piedras) */
}

/* Base Font */
body {
    font-family: 'Inter', sans-serif;
    scroll-behavior: smooth;
}

/* Clases de colores personalizados para el SVG del logo */
.logo-svg-rock { 
    fill: var(--color-dark-primary); 
    transition: fill 0.3s;
}
.logo-svg-river { 
    fill: var(--color-accent-river); 
    transition: fill 0.3s;
}
.logo-svg-pebbles { 
    fill: var(--color-dark-secondary); 
}

/* Clases de utilidad para mapear variables CSS a clases de Tailwind */
/* Estas clases se usan en el HTML para aplicar los colores de forma dinámica */
.bg-pandito-background { background-color: var(--color-background); }
.text-pandito-dark-primary { color: var(--color-dark-primary); }
.text-pandito-accent-river { color: var(--color-accent-river); }
.bg-pandito-accent-river { background-color: var(--color-accent-river); }
.text-pandito-dark-secondary { color: var(--color-dark-secondary); }
.bg-pandito-dark-secondary { background-color: var(--color-dark-secondary); }
.border-pandito-dark-primary { border-color: var(--color-dark-primary); }

/* Arreglo para el focus ring del formulario, usando la variable CSS */
.focus\:ring-pandito-accent-river:focus {
    --tw-ring-color: var(--color-accent-river);
}