/* =========================
   VARIABLES — DARK MODE (default)
========================= */

:root {
    /* BACKGROUNDS */
    --bg: #070b1e;
    --bg-secondary: #0b1028;
    --bg-tertiary: #101830;

    --bg-gradient:
        linear-gradient(145deg, #070b1e 0%, #0d1535 50%, #0a1228 100%);

    /* CARDS & SURFACES */
    --card: rgba(14, 20, 46, 0.82);
    --card-strong: rgba(9, 14, 34, 0.96);
    --card-soft: rgba(18, 26, 54, 0.48);
    --card-hover: rgba(20, 30, 62, 0.92);
    --card-border: rgba(79, 140, 255, 0.14);

    /* TEXT */
    --text: #eef2ff;
    --text-secondary: #c7d2f5;
    --text-muted: rgba(199, 210, 245, 0.55);
    --text-dim: rgba(199, 210, 245, 0.32);

    /* ACCENT */
    --accent: #4f8cff;
    --accent-dark: #2563eb;
    --accent-light: #7eb3ff;
    --accent-glow: rgba(79, 140, 255, 0.38);

    /* STATUS COLORS */
    --success: #10d9a0;
    --warning: #fbbf24;
    --danger: #f87171;
    --info: #22d3ee;

    /* BORDERS */
    --border: rgba(110, 140, 220, 0.1);
    --border-light: rgba(110, 140, 220, 0.05);
    --border-strong: rgba(110, 140, 220, 0.22);

    /* RADII */
    --radius: 16px;
    --radius-sm: 10px;
    --radius-lg: 20px;
    --radius-xl: 24px;

    /* SHADOWS */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.22), 0 1px 2px rgba(0, 0, 0, 0.14);
    --shadow: 0 8px 28px rgba(0, 0, 0, 0.38), 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 20px 56px rgba(0, 0, 0, 0.48), 0 6px 18px rgba(0, 0, 0, 0.26);
    --shadow-xl: 0 32px 72px rgba(0, 0, 0, 0.58), 0 12px 32px rgba(0, 0, 0, 0.32);
    --shadow-glow: 0 0 40px rgba(79, 140, 255, 0.28), 0 0 14px rgba(79, 140, 255, 0.18);

    /* TRANSITIONS */
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.38s cubic-bezier(0.4, 0, 0.2, 1);

    /* Z-INDEX */
    --z-header: 50;
    --z-dropdown: 300;
    --z-modal: 1000;
    --z-toast: 1100;
    --z-panel: 1200;
}

/* =========================
   VARIABLES — LIGHT MODE
========================= */

body.light {
    /* BACKGROUNDS — lavanda-azul suave, nada de gris plano */
    --bg: #f0f4ff;
    --bg-secondary: #e6ecf8;
    --bg-tertiary: #d9e3f2;

    --bg-gradient: linear-gradient(145deg, #eef2ff 0%, #e8edf8 50%, #f2f5ff 100%);

    /* CARDS & SURFACES */
    --card: rgba(255, 255, 255, 0.92);
    --card-strong: rgba(255, 255, 255, 0.99);
    --card-soft: rgba(235, 241, 255, 0.7);
    --card-hover: rgba(245, 248, 255, 0.97);
    --card-border: rgba(79, 140, 255, 0.22);

    /* TEXT */
    --text: #0d1340;
    --text-secondary: #253078;
    --text-muted: rgba(13, 19, 64, 0.52);
    --text-dim: rgba(13, 19, 64, 0.32);

    /* ACCENT */
    --accent: #2563eb;
    --accent-dark: #1e50c8;
    --accent-light: #4f8cff;
    --accent-glow: rgba(37, 99, 235, 0.18);

    /* STATUS COLORS — ajustados para fondo claro */
    --success: #059669;
    --warning: #d97706;
    --danger: #dc2626;
    --info: #0891b2;

    /* BORDERS */
    --border: rgba(79, 120, 210, 0.14);
    --border-light: rgba(79, 120, 210, 0.07);
    --border-strong: rgba(79, 120, 210, 0.24);

    /* SHADOWS — teñidas de azul para dar profundidad real */
    --shadow-sm: 0 2px 8px rgba(37, 99, 235, 0.09), 0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow: 0 8px 28px rgba(37, 99, 235, 0.13), 0 3px 8px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 18px 50px rgba(37, 99, 235, 0.16), 0 6px 16px rgba(0, 0, 0, 0.07);
    --shadow-xl: 0 28px 64px rgba(37, 99, 235, 0.2), 0 12px 28px rgba(0, 0, 0, 0.09);
    --shadow-glow: 0 0 32px rgba(37, 99, 235, 0.18), 0 0 10px rgba(37, 99, 235, 0.1);
}