/* Variables CSS para temas */
:root {
    /* Tema claro (por defecto) */
    --background-color: #fff;
    --text-primary: #1a1a1a;
    --text-secondary: #555;
    --text-tertiary: #777;
    --section-bg: #f9f9f9;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --link-color: #00b4d8;
    --link-hover: #008CAA;
    --header-bg: #1a1a1a;
    --header-text: #fff;
}

.dark-theme {
    /* Tema oscuro */
    --background-color: #1a1a1a;
    --text-primary: #fff;
    --text-secondary: #ccc;
    --text-tertiary: #999;
    --section-bg: #333;
    --shadow-color: rgba(255, 255, 255, 0.1);
    --link-color: #00b4d8;
    --link-hover: #66d9ef;
    --header-bg: #000;
    --header-text: #fff;
}

body {
    background-color: var(--background-color);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}