:root {
    --color-primary: #2563eb;      /* azul */
    --color-primary-hover: #1d4ed8;
    --color-bg: #ffffff;
    --color-text: #111827;
    --color-secondary-bg: #f3f4f6; /* gris claro */
    --color-secondary-bg-dark: #d0d0d0; /* gris oscuro */
    --color-text-secondary: #4b5563; /* gris para subtítulos */
    --color-text-secondary-dark: #d1d5db;
}

@media (prefers-color-scheme: dark) {
    :root {
	--color-primary: #222;
    	--color-primary-hover: #444;
        --color-text: #f9fafb;
        --color-bg: #111;
    	--color-secondary-bg: #333;
        --color-secondary-bg-dark: #222;
        --color-text-secondary: #d1d5db;
    }
}

.transition-colors-custom {
   /* transition: background-color var(--transition-colors), color var(--transition-colors);*/
}