:root {
    /* 🎨 Tipografía y forma */
    --radius: 16px;
    --font-main: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;

    /* 🌙 Modo oscuro (predeterminado) */
    --bg: #0b0f14;
    --bg-intro: radial-gradient(circle at top left, #0b0f14, #060a0f);
    --bg-card: linear-gradient(180deg, var(--card), rgba(12, 18, 26, 0.6));
    --bg-logo: linear-gradient(135deg, var(--accent), #6a00ff);
    --card: #121b24;
    --accent: #00b7ff;
    --accent2: #ffffff;
    --accent-glow: rgba(0, 212, 255, 0.6);
    --glass: rgba(255, 255, 255, 0.04);
    --glass-2: rgba(255, 255, 255, 0.03);
    --muted: #98a0aa;
    --text-color: #e6eef6;
    --text-muted: #aeb6bf;
    --shadow-color: rgba(3, 10, 20, 0.6);
    --intro-gradient: radial-gradient(circle at top left, #0b0f14, #060a0f);

    /* 💫 Efectos */
    --hover-brightness: 1.1;
    --glow-accent: 0 0 25px rgba(0, 212, 255, 0.6);
    --glow-strong: 0 0 40px rgba(0, 212, 255, 0.9);
    --glow-subtle: 0 0 15px rgba(0, 212, 255, 0.4);

    /* ✨ Sombras y bordes */
    --shadow-card: 0 8px 30px rgba(2, 6, 12, 0.6);
    --shadow-card-hover: 0 18px 45px rgba(2, 6, 12, 0.8);
    --border-soft: 1px solid rgba(255, 255, 255, 0.08);
    --border-accent: 1px solid var(--accent);

    /* 💡 Colores para botones */
    --btn-bg: var(--accent);
    --btn-color: #000;
    --btn-hover-bg: #0af;
    --btn-ghost-border: rgba(0, 212, 255, 0.3);
    --btn-ghost-bg-hover: rgba(0, 212, 255, 0.1);
    --btn-shadow: 0 0 12px var(--accent);
}

/* ☀️ Tema claro */
.light-mode {
    --bg: #c7c7c9;
    --bg-intro: radial-gradient(circle at top left, #d7d7d9, #a0a0b3);
    --bg-card: linear-gradient(180deg, var(--card), rgba(255, 255, 255, 0.6));
    --bg-logo: linear-gradient(135deg, var(--accent), #6a00ff);
    --card: #e5e5e8;
    --accent: #00b7ff;
    --accent2: #000000;
    --accent-glow: rgba(107, 164, 217, 0.6);
    --glass: rgba(0, 0, 0, 0.04);
    --glass-2: rgba(0, 0, 0, 0.06);
    --muted: #444;
    --text-color: #1a1a1a;
    --text-muted: #5a5a5a;
    --shadow-color: rgba(0, 0, 0, 0.15);
    --intro-gradient: radial-gradient(circle at top left, #d7d7d9, #bcbcc0);

    /* 💫 Efectos */
    --hover-brightness: 1.05;
    --glow-accent: 0 0 15px rgba(107, 164, 217, 0.3);
    --glow-strong: 0 0 25px rgba(107, 164, 217, 0.4);
    --glow-subtle: 0 0 10px rgba(107, 164, 217, 0.2);

    /* ✨ Sombras y bordes */
    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.15);
    --shadow-card-hover: 0 8px 35px rgba(0, 0, 0, 0.2);
    --border-soft: 1px solid rgba(0, 0, 0, 0.08);
    --border-accent: 1px solid var(--accent);

    /* 💡 Colores para botones */
    --btn-bg: var(--accent);
    --btn-color: #fff;
    --btn-hover-bg: #7ea6d4;
    --btn-ghost-border: rgba(107, 164, 217, 0.4);
    --btn-ghost-bg-hover: rgba(107, 164, 217, 0.1);
    --btn-shadow: 0 0 10px rgba(107, 164, 217, 0.3);
}