/* ═══════════════════════════════════════════════════════
   Vista Brain — Theme System v3
   Premium dark with vibrant accents & glass morphism
   ═══════════════════════════════════════════════════════ */

:root,
:root[data-theme="dark"] {
    /* ── Background Layers ─────────────────────── */
    --bg-primary: #070a11;
    --bg-secondary: #0d1017;
    --bg-card: rgba(16, 20, 30, 0.65);
    --bg-card-solid: #10141e;
    --bg-card-hover: rgba(22, 27, 40, 0.8);
    --bg-elevated: rgba(20, 25, 38, 0.7);
    --bg-glass: rgba(255, 255, 255, 0.03);

    /* ── Borders ──────────────────────────────── */
    --border: rgba(255, 255, 255, 0.06);
    --border-hover: rgba(255, 255, 255, 0.12);
    --border-glow: rgba(99, 140, 255, 0.15);

    /* ── Text ─────────────────────────────────── */
    --text-primary: #f0f2f8;
    --text-secondary: #8891a8;
    --text-muted: #4e5569;

    /* ── Accent Palette ──────────────────────── */
    --accent: #638cff;
    --accent-hover: #5078e8;
    --accent-light: rgba(99, 140, 255, 0.10);
    --accent-glow: rgba(99, 140, 255, 0.25);

    /* ── Card Accent Colors (per-card theming) ── */
    --card-blue: #638cff;
    --card-green: #3dd9a0;
    --card-purple: #a87bff;
    --card-amber: #ffb547;
    --card-pink: #ff6b9d;
    --card-cyan: #4dd4e6;
    --card-red: #ff6b6b;
    --card-teal: #3dc9b0;

    /* ── Semantic ──────────────────────────────── */
    --success: #3dd9a0;
    --success-bg: rgba(61, 217, 160, 0.08);
    --warning: #ffb547;
    --warning-bg: rgba(255, 181, 71, 0.08);
    --danger: #ff6b6b;
    --danger-bg: rgba(255, 107, 107, 0.08);

    /* ── Chart Palette — Vibrant ─────────────── */
    --chart-1: #638cff;
    --chart-2: #3dd9a0;
    --chart-3: #a87bff;
    --chart-4: #ffb547;
    --chart-5: #ff6b9d;
    --chart-6: #4dd4e6;

    /* ── Sidebar ─────────────────────────────── */
    --sidebar-bg: #060810;
    --sidebar-active: rgba(99, 140, 255, 0.12);
    --sidebar-hover: rgba(255, 255, 255, 0.04);
    --sidebar-border: rgba(255, 255, 255, 0.04);

    /* ── Components ──────────────────────────── */
    --mini-ai-bg: rgba(10, 13, 22, 0.8);
    --mini-ai-border: rgba(99, 140, 255, 0.08);
    --input-bg: rgba(12, 15, 24, 0.8);
    --input-border: rgba(255, 255, 255, 0.08);
    --input-focus: #638cff;
    --topbar-bg: rgba(7, 10, 17, 0.8);
    --topbar-border: rgba(255, 255, 255, 0.04);
    --scrollbar-bg: transparent;
    --scrollbar-thumb: rgba(255, 255, 255, 0.06);

    /* ── Shadows & Effects ───────────────────── */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.4);
    --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.03);
    --shadow-glow: 0 0 20px rgba(99, 140, 255, 0.08);

    /* ── Gradients ────────────────────────────── */
    --gradient-blue: linear-gradient(135deg, #638cff, #4a6eff);
    --gradient-green: linear-gradient(135deg, #3dd9a0, #28c98c);
    --gradient-purple: linear-gradient(135deg, #a87bff, #8b5cf6);
    --gradient-amber: linear-gradient(135deg, #ffb547, #f59e0b);
    --gradient-pink: linear-gradient(135deg, #ff6b9d, #ec4899);
    --gradient-subtle: linear-gradient(135deg, rgba(99, 140, 255, 0.05), rgba(168, 123, 255, 0.03));

    /* ── Radii ────────────────────────────────── */
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;

    /* ── Motion ────────────────────────────────── */
    --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Light Theme ────────────────────────────────────── */
:root[data-theme="light"] {
    --bg-primary: #f4f6fb;
    --bg-secondary: #ffffff;
    --bg-card: rgba(255, 255, 255, 0.9);
    --bg-card-solid: #ffffff;
    --bg-card-hover: #f8f9fc;
    --bg-elevated: rgba(255, 255, 255, 0.95);
    --bg-glass: rgba(255, 255, 255, 0.7);
    --border: rgba(0, 0, 0, 0.06);
    --border-hover: rgba(0, 0, 0, 0.12);
    --border-glow: rgba(59, 100, 217, 0.12);
    --text-primary: #1a1f36;
    --text-secondary: #5c6280;
    --text-muted: #9ca0b8;
    --accent: #3b64d9;
    --accent-hover: #2a50c0;
    --accent-light: rgba(59, 100, 217, 0.06);
    --accent-glow: rgba(59, 100, 217, 0.12);
    --card-blue: #3b64d9;
    --card-green: #059669;
    --card-purple: #7c3aed;
    --card-amber: #d97706;
    --card-pink: #db2777;
    --card-cyan: #0891b2;
    --card-red: #dc2626;
    --card-teal: #0d9488;
    --success: #059669;
    --success-bg: rgba(5, 150, 105, 0.06);
    --warning: #d97706;
    --warning-bg: rgba(217, 119, 6, 0.06);
    --danger: #dc2626;
    --danger-bg: rgba(220, 38, 38, 0.06);
    --chart-1: #3b64d9;
    --chart-2: #059669;
    --chart-3: #7c3aed;
    --chart-4: #d97706;
    --chart-5: #db2777;
    --chart-6: #0891b2;
    --sidebar-bg: #eaecf4;
    --sidebar-active: rgba(59, 100, 217, 0.10);
    --sidebar-hover: rgba(0, 0, 0, 0.03);
    --sidebar-border: rgba(0, 0, 0, 0.05);
    --mini-ai-bg: #f8f9fc;
    --mini-ai-border: rgba(0, 0, 0, 0.06);
    --input-bg: #f4f6fb;
    --input-border: rgba(0, 0, 0, 0.08);
    --input-focus: #3b64d9;
    --topbar-bg: rgba(255, 255, 255, 0.85);
    --topbar-border: rgba(0, 0, 0, 0.05);
    --scrollbar-bg: transparent;
    --scrollbar-thumb: rgba(0, 0, 0, 0.08);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.08);
    --shadow-card: 0 1px 4px rgba(0, 0, 0, 0.06);
    --shadow-glow: none;
    --gradient-subtle: linear-gradient(135deg, rgba(59, 100, 217, 0.03), rgba(124, 58, 237, 0.02));
}