/* ═══════════════════════════════════════════════════════════
   VIRGO COMMAND — THEME SYSTEM
   5 luxury palettes. User picks one. Stored in localStorage.
   ═══════════════════════════════════════════════════════════ */

/* ── Default: Midnight Opulence ── */
:root,
[data-theme="midnight"] {
    --vc-bg: #1A1A2E;
    --vc-bg-rgb: 26, 26, 46;
    --vc-card: #16213e;
    --vc-card-rgb: 22, 33, 62;
    --vc-surface: #141428;
    --vc-accent: #efc07b;
    --vc-accent-rgb: 239, 192, 123;
    --vc-accent-dark: #d4a853;
    --vc-text: #F5F0E6;
    --vc-text-dim: #8892a4;
    --vc-text-muted: #5a6578;
    --vc-text-label: #9A8F85;
    --vc-border: rgba(239, 192, 123, 0.12);
    --vc-border-hover: rgba(239, 192, 123, 0.3);
    --vc-glow: rgba(239, 192, 123, 0.04);
    --vc-input-bg: rgba(255, 255, 255, 0.04);
    --vc-input-border: rgba(255, 255, 255, 0.08);
    --vc-input-focus: rgba(239, 192, 123, 0.4);
    --vc-input-focus-bg: rgba(239, 192, 123, 0.04);
    --vc-gradient: linear-gradient(135deg, #efc07b, #d4a853);
    --vc-card-bg: rgba(255, 255, 255, 0.03);
    --vc-topbar-bg: rgba(22, 33, 62, 0.95);
}

/* ── Rose Gold Romance ── */
[data-theme="rosegold"] {
    --vc-bg: #1E1418;
    --vc-bg-rgb: 30, 20, 24;
    --vc-card: #2A1F24;
    --vc-card-rgb: 42, 31, 36;
    --vc-surface: #1A1215;
    --vc-accent: #d4908a;
    --vc-accent-rgb: 212, 144, 138;
    --vc-accent-dark: #b76e79;
    --vc-text: #f7e7ce;
    --vc-text-dim: #9A8A8F;
    --vc-text-muted: #6A5A5F;
    --vc-text-label: #B09A9E;
    --vc-border: rgba(212, 144, 138, 0.12);
    --vc-border-hover: rgba(212, 144, 138, 0.3);
    --vc-glow: rgba(212, 144, 138, 0.04);
    --vc-input-bg: rgba(255, 255, 255, 0.04);
    --vc-input-border: rgba(255, 255, 255, 0.08);
    --vc-input-focus: rgba(212, 144, 138, 0.4);
    --vc-input-focus-bg: rgba(212, 144, 138, 0.04);
    --vc-gradient: linear-gradient(135deg, #d4908a, #b76e79);
    --vc-card-bg: rgba(255, 255, 255, 0.03);
    --vc-topbar-bg: rgba(42, 31, 36, 0.95);
}

/* ── Arctic Frost ── */
[data-theme="arctic"] {
    --vc-bg: #131B28;
    --vc-bg-rgb: 19, 27, 40;
    --vc-card: #1A2538;
    --vc-card-rgb: 26, 37, 56;
    --vc-surface: #111828;
    --vc-accent: #8FB8DE;
    --vc-accent-rgb: 143, 184, 222;
    --vc-accent-dark: #6A9AC0;
    --vc-text: #f0f4f8;
    --vc-text-dim: #7B8FA3;
    --vc-text-muted: #4A5E72;
    --vc-text-label: #8A9EB2;
    --vc-border: rgba(143, 184, 222, 0.12);
    --vc-border-hover: rgba(143, 184, 222, 0.3);
    --vc-glow: rgba(143, 184, 222, 0.04);
    --vc-input-bg: rgba(255, 255, 255, 0.04);
    --vc-input-border: rgba(255, 255, 255, 0.08);
    --vc-input-focus: rgba(143, 184, 222, 0.4);
    --vc-input-focus-bg: rgba(143, 184, 222, 0.04);
    --vc-gradient: linear-gradient(135deg, #8FB8DE, #6A9AC0);
    --vc-card-bg: rgba(255, 255, 255, 0.03);
    --vc-topbar-bg: rgba(26, 37, 56, 0.95);
}

/* ── Royal Burgundy ── */
[data-theme="burgundy"] {
    --vc-bg: #1A0F14;
    --vc-bg-rgb: 26, 15, 20;
    --vc-card: #2D1520;
    --vc-card-rgb: 45, 21, 32;
    --vc-surface: #180D12;
    --vc-accent: #C9856B;
    --vc-accent-rgb: 201, 133, 107;
    --vc-accent-dark: #a0522d;
    --vc-text: #f5f0dc;
    --vc-text-dim: #997A7A;
    --vc-text-muted: #6A5252;
    --vc-text-label: #B09088;
    --vc-border: rgba(201, 133, 107, 0.12);
    --vc-border-hover: rgba(201, 133, 107, 0.3);
    --vc-glow: rgba(201, 133, 107, 0.04);
    --vc-input-bg: rgba(255, 255, 255, 0.04);
    --vc-input-border: rgba(255, 255, 255, 0.08);
    --vc-input-focus: rgba(201, 133, 107, 0.4);
    --vc-input-focus-bg: rgba(201, 133, 107, 0.04);
    --vc-gradient: linear-gradient(135deg, #C9856B, #a0522d);
    --vc-card-bg: rgba(255, 255, 255, 0.03);
    --vc-topbar-bg: rgba(45, 21, 32, 0.95);
}

/* ── Modern Slate ── */
[data-theme="slate"] {
    --vc-bg: #1C2128;
    --vc-bg-rgb: 28, 33, 40;
    --vc-card: #2A3140;
    --vc-card-rgb: 42, 49, 64;
    --vc-surface: #181D24;
    --vc-accent: #A8B8C8;
    --vc-accent-rgb: 168, 184, 200;
    --vc-accent-dark: #7A8FA5;
    --vc-text: #ecf0f1;
    --vc-text-dim: #7F8C9B;
    --vc-text-muted: #4F5C6B;
    --vc-text-label: #8F9CAB;
    --vc-border: rgba(168, 184, 200, 0.12);
    --vc-border-hover: rgba(168, 184, 200, 0.3);
    --vc-glow: rgba(168, 184, 200, 0.04);
    --vc-input-bg: rgba(255, 255, 255, 0.04);
    --vc-input-border: rgba(255, 255, 255, 0.08);
    --vc-input-focus: rgba(168, 184, 200, 0.4);
    --vc-input-focus-bg: rgba(168, 184, 200, 0.04);
    --vc-gradient: linear-gradient(135deg, #A8B8C8, #7A8FA5);
    --vc-card-bg: rgba(255, 255, 255, 0.03);
    --vc-topbar-bg: rgba(42, 49, 64, 0.95);
}

/* ── Emerald Prestige ── */
[data-theme="emerald"] {
    --vc-bg: #0a2e25;
    --vc-bg-rgb: 10, 46, 37;
    --vc-card: #0d4c3c;
    --vc-card-rgb: 13, 76, 60;
    --vc-surface: #081f1a;
    --vc-accent: #7ba05b;
    --vc-accent-rgb: 123, 160, 91;
    --vc-accent-dark: #5a7d3f;
    --vc-text: #f4f1eb;
    --vc-text-dim: #8aA090;
    --vc-text-muted: #5a7068;
    --vc-text-label: #9AB0A0;
    --vc-border: rgba(123, 160, 91, 0.12);
    --vc-border-hover: rgba(123, 160, 91, 0.3);
    --vc-glow: rgba(123, 160, 91, 0.04);
    --vc-input-bg: rgba(255, 255, 255, 0.04);
    --vc-input-border: rgba(255, 255, 255, 0.08);
    --vc-input-focus: rgba(123, 160, 91, 0.4);
    --vc-input-focus-bg: rgba(123, 160, 91, 0.04);
    --vc-gradient: linear-gradient(135deg, #7ba05b, #5a7d3f);
    --vc-card-bg: rgba(255, 255, 255, 0.03);
    --vc-topbar-bg: rgba(13, 76, 60, 0.95);
}

/* ═══════════════════════════════════════════════════════════
   THEME PICKER COMPONENT
   ═══════════════════════════════════════════════════════════ */
.theme-picker {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 0.8rem;
}

.theme-swatch {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

.theme-swatch:hover {
    transform: scale(1.08);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.theme-swatch.active {
    border-color: var(--vc-accent);
    box-shadow: 0 0 0 3px rgba(var(--vc-accent-rgb), 0.3);
}

.theme-swatch .swatch-half {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
}

.theme-swatch .swatch-half:first-child { left: 0; }
.theme-swatch .swatch-half:last-child { right: 0; }

.theme-swatch .swatch-dot {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

/* Swatch colours */
.swatch-midnight .swatch-half:first-child { background: #1A1A2E; }
.swatch-midnight .swatch-half:last-child { background: #16213e; }
.swatch-midnight .swatch-dot { background: #efc07b; }

.swatch-rosegold .swatch-half:first-child { background: #1E1418; }
.swatch-rosegold .swatch-half:last-child { background: #2A1F24; }
.swatch-rosegold .swatch-dot { background: #d4908a; }

.swatch-arctic .swatch-half:first-child { background: #131B28; }
.swatch-arctic .swatch-half:last-child { background: #1A2538; }
.swatch-arctic .swatch-dot { background: #8FB8DE; }

.swatch-burgundy .swatch-half:first-child { background: #1A0F14; }
.swatch-burgundy .swatch-half:last-child { background: #2D1520; }
.swatch-burgundy .swatch-dot { background: #C9856B; }

.swatch-slate .swatch-half:first-child { background: #1C2128; }
.swatch-slate .swatch-half:last-child { background: #2A3140; }
.swatch-slate .swatch-dot { background: #A8B8C8; }

.swatch-emerald .swatch-half:first-child { background: #0a2e25; }
.swatch-emerald .swatch-half:last-child { background: #0d4c3c; }
.swatch-emerald .swatch-dot { background: #7ba05b; }

.theme-name {
    font-size: 0.72rem;
    color: var(--vc-text-dim);
    text-align: center;
    margin-top: 4px;
}