/* ============================================================
   WIVENT SOCIALWALL — Theme Engine
   Variable overrides activated via body class
   Applied AFTER module CSS so overrides cascade properly
   ============================================================ */

/* ── DEFAULT (theme-dark) ──────────────────────────────────── */
/* The :root tokens in each module CSS are already dark theme.
   This class re-declares them to be explicit and complete.     */

body.theme-dark {
    /* Backgrounds */
    --bg: #0a0a12;
    --bg-subtle: #10101a;
    --bg-card: rgba(255, 255, 255, 0.04);
    --surface: rgba(255, 255, 255, 0.04);
    --surface-hover: rgba(255, 255, 255, 0.07);
    --glass-border: rgba(255, 255, 255, 0.08);
    --sidebar-bg: rgba(8, 8, 14, 0.92);

    /* Accent */
    --accent: #00f3ff;
    --accent-soft: rgba(0, 243, 255, 0.12);
    --accent-glow: rgba(0, 243, 255, 0.25);
    --accent-light: #66f7ff;
    --accent-dark: #00b8c4;
    --magenta: #bd00ff;

    /* Semantic */
    --error: #ff4466;
    --success: #00e676;
    --live-red: #ff3b3b;

    /* Text */
    --text: #eaeaea;
    --text-dim: #888;
    --text-muted: #444;

    /* Borders & shadows */
    --border: rgba(255, 255, 255, 0.08);
    --border-hover: rgba(255, 255, 255, 0.15);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 6px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5);
    --bg-overlay: rgba(0, 0, 0, 0.6);

    /* Typography */
    --font-main: 'Outfit', system-ui, sans-serif;
    --font-display: 'Outfit', system-ui, sans-serif;
    --font-body: 'Outfit', system-ui, sans-serif;
    --font-mono: 'Fira Code', monospace;
}


/* ── WEDDING (theme-wedding) ──────────────────────────────── */
/* Elegant: Ivory/cream, champagne gold accents, serif fonts    */

body.theme-wedding {
    /* Backgrounds */
    --bg: #faf8f4;
    --bg-subtle: #f3efe8;
    --bg-card: #ffffff;
    --surface: #f5f2ec;
    --surface-hover: #ede8df;
    --glass-border: rgba(180, 160, 130, 0.18);
    --sidebar-bg: rgba(250, 248, 244, 0.95);

    /* Accent — champagne / gold */
    --accent: #b8956a;
    --accent-soft: rgba(184, 149, 106, 0.12);
    --accent-glow: rgba(184, 149, 106, 0.25);
    --accent-light: #d4b896;
    --accent-dark: #8a6b46;
    --magenta: #c7899e;

    /* Semantic */
    --error: #c44;
    --success: #5a9a5a;
    --live-red: #d45555;

    /* Text */
    --text: #3a3530;
    --text-dim: #8a8078;
    --text-muted: #bbb0a4;

    /* Borders & shadows */
    --border: rgba(0, 0, 0, 0.07);
    --border-hover: rgba(0, 0, 0, 0.12);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 6px 24px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.1);
    --bg-overlay: rgba(0, 0, 0, 0.45);

    /* Typography — Serif for elegance */
    --font-main: 'Playfair Display', Georgia, serif;
    --font-display: 'Playfair Display', Georgia, serif;
    --font-body: 'Inter', system-ui, sans-serif;
    --font-mono: 'Inter', system-ui, sans-serif;

    /* Override page-level colors */
    color-scheme: light;
}

/* ── Extra wedding polish ── */
body.theme-wedding .state-screen,
body.theme-wedding .gallery-header,
body.theme-wedding .play-sidebar,
body.theme-wedding .join-container {
    background: var(--bg);
}

body.theme-wedding .btn-download,
body.theme-wedding .btn-create,
body.theme-wedding .btn-copy--play:hover,
body.theme-wedding .btn-upload {
    color: #fff;
}

body.theme-wedding .loader-ring {
    border-color: var(--border);
    border-top-color: var(--accent);
}


/* ── NEON PARTY (theme-neon) ──────────────────────────────── */
/* Fiesta: Deep purple, neon green + fuchsia, heavy glow       */

body.theme-neon {
    /* Backgrounds */
    --bg: #0d0520;
    --bg-subtle: #130830;
    --bg-card: rgba(255, 255, 255, 0.04);
    --surface: rgba(255, 255, 255, 0.05);
    --surface-hover: rgba(255, 255, 255, 0.09);
    --glass-border: rgba(200, 100, 255, 0.12);
    --sidebar-bg: rgba(13, 5, 32, 0.94);

    /* Accent — neon green */
    --accent: #39ff14;
    --accent-soft: rgba(57, 255, 20, 0.12);
    --accent-glow: rgba(57, 255, 20, 0.3);
    --accent-light: #7fff5a;
    --accent-dark: #28b80e;
    /* Fuchsia as secondary */
    --magenta: #ff2d95;

    /* Semantic */
    --error: #ff3366;
    --success: #39ff14;
    --live-red: #ff2d55;

    /* Text */
    --text: #f0e6ff;
    --text-dim: #9a8abf;
    --text-muted: #4a3a6a;

    /* Borders & shadows */
    --border: rgba(200, 100, 255, 0.12);
    --border-hover: rgba(200, 100, 255, 0.25);
    --shadow-sm: 0 2px 12px rgba(57, 255, 20, 0.06);
    --shadow-md: 0 6px 24px rgba(57, 255, 20, 0.1);
    --shadow-lg: 0 12px 40px rgba(57, 255, 20, 0.15);
    --bg-overlay: rgba(13, 5, 32, 0.7);

    /* Typography */
    --font-main: 'Outfit', system-ui, sans-serif;
    --font-display: 'Outfit', system-ui, sans-serif;
    --font-body: 'Outfit', system-ui, sans-serif;
    --font-mono: 'Fira Code', monospace;
}

/* ── Neon glow effects ── */
body.theme-neon .event-card:hover,
body.theme-neon .gallery-card:hover,
body.theme-neon .mod-photo-card:hover {
    box-shadow: 0 0 20px rgba(57, 255, 20, 0.08),
        0 0 40px rgba(255, 45, 149, 0.06);
}

body.theme-neon .btn-download,
body.theme-neon .btn-upload {
    background: linear-gradient(135deg, #39ff14, #00c9ff);
    color: #0d0520;
    font-weight: 700;
}

body.theme-neon .btn-download:hover,
body.theme-neon .btn-upload:hover {
    box-shadow: 0 0 20px rgba(57, 255, 20, 0.35),
        0 4px 16px rgba(0, 0, 0, 0.3);
}

body.theme-neon .loader-ring {
    border-color: rgba(200, 100, 255, 0.2);
    border-top-color: #39ff14;
}

body.theme-neon .btn-copy--play:hover {
    color: #39ff14;
    border-color: rgba(57, 255, 20, 0.3);
    background: rgba(57, 255, 20, 0.06);
    box-shadow: 0 0 10px rgba(57, 255, 20, 0.1);
}

body.theme-neon .btn-copy--join:hover {
    color: #ff2d95;
    border-color: rgba(255, 45, 149, 0.3);
    background: rgba(255, 45, 149, 0.06);
    box-shadow: 0 0 10px rgba(255, 45, 149, 0.1);
}


/* ============================================================
   XV AÑOS — 4 variants
   ============================================================ */

/* ── XV Dark (morado elegante) ── */
body.theme-xv-dark {
    --bg: #1a0e2e;
    --bg-subtle: #22143d;
    --bg-card: rgba(255, 255, 255, 0.05);
    --surface: rgba(255, 255, 255, 0.04);
    --surface-hover: rgba(255, 255, 255, 0.08);
    --glass-border: rgba(180, 130, 255, 0.12);
    --sidebar-bg: rgba(26, 14, 46, 0.94);
    --accent: #d4a0ff;
    --accent-soft: rgba(212, 160, 255, 0.12);
    --accent-glow: rgba(212, 160, 255, 0.25);
    --accent-light: #e4c0ff;
    --accent-dark: #a06cd5;
    --magenta: #ff6eb4;
    --error: #ff5577;
    --success: #7dffaf;
    --live-red: #ff4466;
    --text: #f0e6ff;
    --text-dim: #a090c0;
    --text-muted: #5a4880;
    --border: rgba(180, 130, 255, 0.12);
    --border-hover: rgba(180, 130, 255, 0.22);
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 6px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5);
    --bg-overlay: rgba(26, 14, 46, 0.7);
    --font-main: 'Playfair Display', Georgia, serif;
    --font-display: 'Playfair Display', Georgia, serif;
    --font-body: 'Inter', system-ui, sans-serif;
    --font-mono: 'Fira Code', monospace;
}

/* ── XV White (blanco con lila) ── */
body.theme-xv-white {
    --bg: #faf7fe;
    --bg-subtle: #f3eef8;
    --bg-card: #ffffff;
    --surface: #f5f0fa;
    --surface-hover: #ede5f5;
    --glass-border: rgba(160, 120, 200, 0.15);
    --sidebar-bg: rgba(250, 247, 254, 0.96);
    --accent: #9b6dcc;
    --accent-soft: rgba(155, 109, 204, 0.1);
    --accent-glow: rgba(155, 109, 204, 0.2);
    --accent-light: #b88ee0;
    --accent-dark: #7a50a8;
    --magenta: #de5fa8;
    --error: #c44;
    --success: #5a9a5a;
    --live-red: #d45555;
    --text: #3a3040;
    --text-dim: #8a7898;
    --text-muted: #b8a8c8;
    --border: rgba(0, 0, 0, 0.06);
    --border-hover: rgba(0, 0, 0, 0.1);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.1);
    --bg-overlay: rgba(0, 0, 0, 0.4);
    --font-main: 'Playfair Display', Georgia, serif;
    --font-display: 'Playfair Display', Georgia, serif;
    --font-body: 'Inter', system-ui, sans-serif;
    --font-mono: 'Inter', system-ui, sans-serif;
    color-scheme: light;
}

/* ── XV Blue (azul noche) ── */
body.theme-xv-blue {
    --bg: #0a1628;
    --bg-subtle: #0f1e38;
    --bg-card: rgba(255, 255, 255, 0.04);
    --surface: rgba(255, 255, 255, 0.04);
    --surface-hover: rgba(255, 255, 255, 0.07);
    --glass-border: rgba(100, 160, 255, 0.1);
    --sidebar-bg: rgba(10, 22, 40, 0.94);
    --accent: #7eb8ff;
    --accent-soft: rgba(126, 184, 255, 0.1);
    --accent-glow: rgba(126, 184, 255, 0.2);
    --accent-light: #a8d0ff;
    --accent-dark: #5090d0;
    --magenta: #c878e0;
    --error: #ff5577;
    --success: #7dffaf;
    --live-red: #ff4466;
    --text: #e0eaff;
    --text-dim: #8098c0;
    --text-muted: #3a4a68;
    --border: rgba(100, 160, 255, 0.1);
    --border-hover: rgba(100, 160, 255, 0.2);
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 6px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5);
    --bg-overlay: rgba(10, 22, 40, 0.7);
    --font-main: 'Playfair Display', Georgia, serif;
    --font-display: 'Playfair Display', Georgia, serif;
    --font-body: 'Inter', system-ui, sans-serif;
    --font-mono: 'Fira Code', monospace;
}

/* ── XV Pink (rosa suave) ── */
body.theme-xv-pink {
    --bg: #fef5f8;
    --bg-subtle: #fceef2;
    --bg-card: #ffffff;
    --surface: #fdf0f4;
    --surface-hover: #fbe4ec;
    --glass-border: rgba(220, 120, 160, 0.12);
    --sidebar-bg: rgba(254, 245, 248, 0.96);
    --accent: #e06090;
    --accent-soft: rgba(224, 96, 144, 0.1);
    --accent-glow: rgba(224, 96, 144, 0.2);
    --accent-light: #f090b0;
    --accent-dark: #c04070;
    --magenta: #d050a0;
    --error: #c44;
    --success: #5a9a5a;
    --live-red: #d45555;
    --text: #4a2838;
    --text-dim: #a07888;
    --text-muted: #d0b0c0;
    --border: rgba(0, 0, 0, 0.06);
    --border-hover: rgba(0, 0, 0, 0.1);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.08);
    --bg-overlay: rgba(0, 0, 0, 0.4);
    --font-main: 'Playfair Display', Georgia, serif;
    --font-display: 'Playfair Display', Georgia, serif;
    --font-body: 'Inter', system-ui, sans-serif;
    --font-mono: 'Inter', system-ui, sans-serif;
    color-scheme: light;
}


/* ============================================================
   INFANTILES — 4 variants
   ============================================================ */

/* ── Kid Blue (superhéroe azul) ── */
body.theme-kid-blue {
    --bg: #0c1a38;
    --bg-subtle: #102550;
    --bg-card: rgba(255, 255, 255, 0.05);
    --surface: rgba(255, 255, 255, 0.05);
    --surface-hover: rgba(255, 255, 255, 0.09);
    --glass-border: rgba(60, 140, 255, 0.15);
    --sidebar-bg: rgba(12, 26, 56, 0.94);
    --accent: #3c8cff;
    --accent-soft: rgba(60, 140, 255, 0.12);
    --accent-glow: rgba(60, 140, 255, 0.3);
    --accent-light: #70b0ff;
    --accent-dark: #2060c0;
    --magenta: #ff4444;
    --error: #ff4444;
    --success: #44ff88;
    --live-red: #ff3333;
    --text: #e8f0ff;
    --text-dim: #8090b8;
    --text-muted: #3a4a68;
    --border: rgba(60, 140, 255, 0.12);
    --border-hover: rgba(60, 140, 255, 0.25);
    --shadow-sm: 0 2px 12px rgba(60, 140, 255, 0.06);
    --shadow-md: 0 6px 24px rgba(60, 140, 255, 0.1);
    --shadow-lg: 0 12px 40px rgba(60, 140, 255, 0.15);
    --bg-overlay: rgba(12, 26, 56, 0.7);
    --font-main: 'Outfit', system-ui, sans-serif;
    --font-display: 'Outfit', system-ui, sans-serif;
    --font-body: 'Outfit', system-ui, sans-serif;
    --font-mono: 'Fira Code', monospace;
}

/* ── Kid Red (superhéroe rojo) ── */
body.theme-kid-red {
    --bg: #1e0808;
    --bg-subtle: #2a0e0e;
    --bg-card: rgba(255, 255, 255, 0.05);
    --surface: rgba(255, 255, 255, 0.05);
    --surface-hover: rgba(255, 255, 255, 0.09);
    --glass-border: rgba(255, 80, 80, 0.12);
    --sidebar-bg: rgba(30, 8, 8, 0.94);
    --accent: #ff4444;
    --accent-soft: rgba(255, 68, 68, 0.12);
    --accent-glow: rgba(255, 68, 68, 0.3);
    --accent-light: #ff7777;
    --accent-dark: #cc2222;
    --magenta: #ffd700;
    --error: #ff6666;
    --success: #44ff88;
    --live-red: #ff3333;
    --text: #fff0f0;
    --text-dim: #c08888;
    --text-muted: #6a3a3a;
    --border: rgba(255, 80, 80, 0.12);
    --border-hover: rgba(255, 80, 80, 0.25);
    --shadow-sm: 0 2px 12px rgba(255, 68, 68, 0.06);
    --shadow-md: 0 6px 24px rgba(255, 68, 68, 0.1);
    --shadow-lg: 0 12px 40px rgba(255, 68, 68, 0.15);
    --bg-overlay: rgba(30, 8, 8, 0.7);
    --font-main: 'Outfit', system-ui, sans-serif;
    --font-display: 'Outfit', system-ui, sans-serif;
    --font-body: 'Outfit', system-ui, sans-serif;
    --font-mono: 'Fira Code', monospace;
}

/* ── Kid Pink (princesas) ── */
body.theme-kid-pink {
    --bg: #fff0f5;
    --bg-subtle: #ffe8ef;
    --bg-card: #ffffff;
    --surface: #ffedf3;
    --surface-hover: #ffdfe8;
    --glass-border: rgba(255, 100, 180, 0.12);
    --sidebar-bg: rgba(255, 240, 245, 0.96);
    --accent: #ff69b4;
    --accent-soft: rgba(255, 105, 180, 0.12);
    --accent-glow: rgba(255, 105, 180, 0.25);
    --accent-light: #ff90cc;
    --accent-dark: #e04898;
    --magenta: #cc44cc;
    --error: #e04848;
    --success: #48c878;
    --live-red: #e04848;
    --text: #4a2040;
    --text-dim: #b07090;
    --text-muted: #ddb0c8;
    --border: rgba(0, 0, 0, 0.05);
    --border-hover: rgba(0, 0, 0, 0.09);
    --shadow-sm: 0 2px 8px rgba(255, 105, 180, 0.06);
    --shadow-md: 0 6px 20px rgba(255, 105, 180, 0.08);
    --shadow-lg: 0 12px 40px rgba(255, 105, 180, 0.12);
    --bg-overlay: rgba(0, 0, 0, 0.35);
    --font-main: 'Outfit', system-ui, sans-serif;
    --font-display: 'Outfit', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, sans-serif;
    --font-mono: 'Inter', system-ui, sans-serif;
    color-scheme: light;
}

/* ── Kid Violet (fantasía) ── */
body.theme-kid-violet {
    --bg: #f8f0ff;
    --bg-subtle: #f0e4fc;
    --bg-card: #ffffff;
    --surface: #f3e8fc;
    --surface-hover: #eadbf8;
    --glass-border: rgba(160, 80, 220, 0.12);
    --sidebar-bg: rgba(248, 240, 255, 0.96);
    --accent: #9b30ff;
    --accent-soft: rgba(155, 48, 255, 0.1);
    --accent-glow: rgba(155, 48, 255, 0.2);
    --accent-light: #b860ff;
    --accent-dark: #7a20cc;
    --magenta: #e040a0;
    --error: #e04848;
    --success: #48c878;
    --live-red: #e04848;
    --text: #301848;
    --text-dim: #9070b0;
    --text-muted: #c8b0e0;
    --border: rgba(0, 0, 0, 0.05);
    --border-hover: rgba(0, 0, 0, 0.09);
    --shadow-sm: 0 2px 8px rgba(155, 48, 255, 0.05);
    --shadow-md: 0 6px 20px rgba(155, 48, 255, 0.08);
    --shadow-lg: 0 12px 40px rgba(155, 48, 255, 0.1);
    --bg-overlay: rgba(0, 0, 0, 0.35);
    --font-main: 'Outfit', system-ui, sans-serif;
    --font-display: 'Outfit', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, sans-serif;
    --font-mono: 'Inter', system-ui, sans-serif;
    color-scheme: light;
}


/* ============================================================
   CLÁSICOS — Bautizo, Graduación, Cumple Pop
   ============================================================ */

/* ── Bautizo (blanco / celeste / dorado) ── */
body.theme-bautizo {
    --bg: #f8fbff;
    --bg-subtle: #eef5fc;
    --bg-card: #ffffff;
    --surface: #f0f6fd;
    --surface-hover: #e4eef8;
    --glass-border: rgba(140, 180, 220, 0.15);
    --sidebar-bg: rgba(248, 251, 255, 0.96);
    --accent: #c8a84e;
    --accent-soft: rgba(200, 168, 78, 0.1);
    --accent-glow: rgba(200, 168, 78, 0.2);
    --accent-light: #dcc070;
    --accent-dark: #a08838;
    --magenta: #80b8e0;
    --error: #c44;
    --success: #5a9a5a;
    --live-red: #d45555;
    --text: #2c3a4a;
    --text-dim: #7890a8;
    --text-muted: #b0c0d0;
    --border: rgba(0, 0, 0, 0.06);
    --border-hover: rgba(0, 0, 0, 0.1);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.08);
    --bg-overlay: rgba(0, 0, 0, 0.4);
    --font-main: 'Playfair Display', Georgia, serif;
    --font-display: 'Playfair Display', Georgia, serif;
    --font-body: 'Inter', system-ui, sans-serif;
    --font-mono: 'Inter', system-ui, sans-serif;
    color-scheme: light;
}

/* ── Graduación (negro / dorado) ── */
body.theme-graduacion {
    --bg: #0c0c0c;
    --bg-subtle: #141414;
    --bg-card: rgba(255, 255, 255, 0.04);
    --surface: rgba(255, 255, 255, 0.04);
    --surface-hover: rgba(255, 255, 255, 0.07);
    --glass-border: rgba(200, 168, 80, 0.12);
    --sidebar-bg: rgba(12, 12, 12, 0.94);
    --accent: #d4a843;
    --accent-soft: rgba(212, 168, 67, 0.12);
    --accent-glow: rgba(212, 168, 67, 0.25);
    --accent-light: #e8c468;
    --accent-dark: #a88430;
    --magenta: #e8c468;
    --error: #ff5555;
    --success: #55dd88;
    --live-red: #ff4444;
    --text: #f0ead8;
    --text-dim: #a09878;
    --text-muted: #504830;
    --border: rgba(200, 168, 80, 0.1);
    --border-hover: rgba(200, 168, 80, 0.2);
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 6px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5);
    --bg-overlay: rgba(0, 0, 0, 0.65);
    --font-main: 'Playfair Display', Georgia, serif;
    --font-display: 'Playfair Display', Georgia, serif;
    --font-body: 'Inter', system-ui, sans-serif;
    --font-mono: 'Fira Code', monospace;
}

/* ── Cumpleaños Pop (colores vibrantes) ── */
body.theme-cumple-pop {
    --bg: #fefbf0;
    --bg-subtle: #fcf5e0;
    --bg-card: #ffffff;
    --surface: #fdf6e8;
    --surface-hover: #fbefd8;
    --glass-border: rgba(255, 150, 50, 0.12);
    --sidebar-bg: rgba(254, 251, 240, 0.96);
    --accent: #ff6b2b;
    --accent-soft: rgba(255, 107, 43, 0.1);
    --accent-glow: rgba(255, 107, 43, 0.2);
    --accent-light: #ff9060;
    --accent-dark: #d44e15;
    --magenta: #e040c0;
    --error: #e04848;
    --success: #48c878;
    --live-red: #e04848;
    --text: #3a2818;
    --text-dim: #a08060;
    --text-muted: #d0b898;
    --border: rgba(0, 0, 0, 0.06);
    --border-hover: rgba(0, 0, 0, 0.1);
    --shadow-sm: 0 2px 8px rgba(255, 107, 43, 0.06);
    --shadow-md: 0 6px 20px rgba(255, 107, 43, 0.08);
    --shadow-lg: 0 12px 40px rgba(255, 107, 43, 0.12);
    --bg-overlay: rgba(0, 0, 0, 0.4);
    --font-main: 'Outfit', system-ui, sans-serif;
    --font-display: 'Outfit', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, sans-serif;
    --font-mono: 'Inter', system-ui, sans-serif;
    color-scheme: light;
}


/* ============================================================
   CUSTOM — Prepared for dynamic background image
   ============================================================ */
body.theme-custom {
    --bg: #0a0a12;
    --bg-subtle: transparent;
    --bg-card: rgba(0, 0, 0, 0.45);
    --surface: rgba(0, 0, 0, 0.3);
    --surface-hover: rgba(0, 0, 0, 0.4);
    --glass-border: rgba(255, 255, 255, 0.12);
    --sidebar-bg: rgba(0, 0, 0, 0.6);
    --accent: #ffffff;
    --accent-soft: rgba(255, 255, 255, 0.1);
    --accent-glow: rgba(255, 255, 255, 0.2);
    --accent-light: #ffffff;
    --accent-dark: #cccccc;
    --magenta: #ff88cc;
    --error: #ff6666;
    --success: #66ff88;
    --live-red: #ff4444;
    --text: #ffffff;
    --text-dim: rgba(255, 255, 255, 0.7);
    --text-muted: rgba(255, 255, 255, 0.35);
    --border: rgba(255, 255, 255, 0.1);
    --border-hover: rgba(255, 255, 255, 0.2);
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 6px 24px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.6);
    --bg-overlay: rgba(0, 0, 0, 0.55);
    --font-main: 'Outfit', system-ui, sans-serif;
    --font-display: 'Outfit', system-ui, sans-serif;
    --font-body: 'Outfit', system-ui, sans-serif;
    --font-mono: 'Fira Code', monospace;
    /* Background image set via JS: background-image, background-size, background-position */
    background-attachment: fixed;
}

body.theme-custom .btn-download,
body.theme-custom .btn-upload {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
}

body.theme-custom .loader-ring {
    border-color: rgba(255, 255, 255, 0.15);
    border-top-color: #fff;
}


/* ============================================================
   SHARED POLISH — Light theme fixes
   ============================================================ */
body.theme-xv-white .btn-download,
body.theme-xv-pink .btn-download,
body.theme-kid-pink .btn-download,
body.theme-kid-violet .btn-download,
body.theme-bautizo .btn-download,
body.theme-cumple-pop .btn-download,
body.theme-xv-white .btn-upload,
body.theme-xv-pink .btn-upload,
body.theme-kid-pink .btn-upload,
body.theme-kid-violet .btn-upload,
body.theme-bautizo .btn-upload,
body.theme-cumple-pop .btn-upload {
    color: #fff;
}

body.theme-kid-blue .gallery-card:hover,
body.theme-kid-red .gallery-card:hover {
    box-shadow: 0 0 20px var(--accent-soft), 0 6px 20px rgba(0, 0, 0, 0.3);
}