:root {
    /* 🌞 VERSIÓN PRINCIPAL (LIGHT COOL PREMIUM) */
    /* 🎯 Colores de Marca */
    --color-brand-green: #8fc600;
    --color-brand-blue: #0b90b9;
    --color-silver: #94a3b8; /* Acento premium plata/gris */

    /* 📝 Textos */
    --color-text-main: #1e293b; /* Slate oscuro neutro */
    --color-text-secondary: #64748b;

    /* 🧩 UI / Interfaz */
    --color-bg-main: #f8fafc; /* Slate muy claro */
    --color-bg-secondary: #f1f5f9;
    --color-border: rgba(148, 163, 184, 0.15); /* Bordes con ligero gris plata */

    /* 🔮 Glassmorphism & Sombras Principales */
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-bg-hover: rgba(255, 255, 255, 0.9);
    --glass-border: rgba(255, 255, 255, 0.6);
    --shadow-premium: 0 10px 35px rgba(100, 116, 139, 0.08); /* Sombra gris azulada */
    --shadow-premium-hover: 0 15px 45px rgba(100, 116, 139, 0.15);

    /* 🎛 Estados */
    --color-hover-green: #7ab300;
    --color-hover-blue: #097e9e;
}

[data-theme="dark"] {
    /* 🌙 VERSIÓN DARK (DEEP SLATE/CARBON) */
    /* 🎯 Colores de Marca */
    --color-brand-green: #7ED957;
    --color-brand-blue: #0b90b9;
    --color-silver: #cbd5e1; /* Plata claro */

    /* 📝 Textos */
    --color-text-main: #f1f5f9;
    --color-text-secondary: #94a3b8;

    /* 🧩 UI / Interfaz */
    --color-bg-main: #0f172a; /* Slate negro */
    --color-bg-secondary: #1e293b;
    --color-border: rgba(255, 255, 255, 0.05);

    /* 🔮 Glassmorphism & Sombras Principales */
    --glass-bg: rgba(30, 41, 59, 0.6);
    --glass-bg-hover: rgba(51, 65, 85, 0.85);
    --glass-border: rgba(255, 255, 255, 0.03);
    --shadow-premium: 0 10px 35px rgba(0, 0, 0, 0.6);
    --shadow-premium-hover: 0 15px 45px rgba(0, 0, 0, 0.8);

    /* 🎛 Estados */
    --color-hover-green: #67ca40;
    --color-hover-blue: #0b90b9;
}

body {
    background-color: var(--color-bg-main);
    color: var(--color-text-main);
    transition: background-color 0.4s ease, color 0.4s ease;
}

/* Background Gradient Enhancement for the "Silver Aura" */
body::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(circle at 15% 15%, rgba(148, 163, 184, 0.08) 0%, transparent 40%),
                radial-gradient(circle at 85% 85%, rgba(148, 163, 184, 0.05) 0%, transparent 40%);
    pointer-events: none;
    z-index: -1;
}
[data-theme="dark"] body::before {
    background: radial-gradient(circle at 15% 15%, rgba(203, 213, 225, 0.03) 0%, transparent 40%),
                radial-gradient(circle at 85% 85%, rgba(203, 213, 225, 0.02) 0%, transparent 40%);
}