/* ========================================
           THEME VARIABLES
           ======================================== */

        /* Light Theme (Default) */
        :root[data-theme="light"], :root {
            /* Background gradients */
            --bg-body: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            --bg-pane-light: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
            --bg-center: linear-gradient(145deg, #475569 0%, #64748b 100%);
            --bg-center-area: linear-gradient(145deg, #1e293b 0%, #334155 100%);

            /* Toolbar & controls */
            --bg-toolbar: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 100%);
            --bg-version-controls: rgba(255, 255, 255, 0.98);

            /* Borders & shadows */
            --border-light: rgba(226, 232, 240, 0.8);
            --border-gray: #e2e8f0;
            --shadow-pane: 4px 0 20px rgba(0, 0, 0, 0.1);
            --shadow-element: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.06);

            /* Text colors */
            --text-primary: #1f2937;
            --text-secondary: #6b7280;
            --text-muted: #9ca3af;
            --text-label: #374151;

            /* Input & control colors */
            --bg-input: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
            --bg-input-hover: linear-gradient(145deg, #ffffff 0%, #f9fafb 100%);
            --bg-input-focus: linear-gradient(145deg, #ffffff 0%, #fafbff 100%);
            --border-input: #e2e8f0;
            --border-input-hover: #a78bfa;
            --border-input-focus: #8b5cf6;

            /* Section controls */
            --bg-section: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
            --bg-section-hover: linear-gradient(145deg, #ffffff 0%, #fafbff 100%);
            --border-section: #e2e8f0;
            --border-section-hover: #c4b5fd;

            /* Splitter */
            --bg-splitter: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
            --bg-splitter-hover: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
            --bg-splitter-active: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);

            /* Scrollbar */
            --scrollbar-thumb: linear-gradient(180deg, rgba(156, 163, 175, 0.5), rgba(107, 114, 128, 0.5));
            --scrollbar-thumb-hover: linear-gradient(180deg, rgba(107, 114, 128, 0.8), rgba(75, 85, 99, 0.8));

            /* Skeleton loader */
            --skeleton-bg: linear-gradient(90deg, #f0f0f0 0%, #f8f8f8 50%, #f0f0f0 100%);

            /* Drawers & Modals */
            --bg-drawer: #ffffff;
            --bg-modal: #ffffff;
            --border-drawer: #e5e7eb;
        }

        /* Dark Theme */
        :root[data-theme="dark"] {
            /* Background gradients - darker, more contrast */
            --bg-body: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            --bg-pane-light: linear-gradient(145deg, #1f2937 0%, #111827 100%);
            --bg-center: linear-gradient(145deg, #374151 0%, #1f2937 100%);
            --bg-center-area: linear-gradient(145deg, #111827 0%, #0f172a 100%);

            /* Toolbar & controls */
            --bg-toolbar: linear-gradient(135deg, rgba(31, 41, 55, 0.98) 0%, rgba(17, 24, 39, 0.98) 100%);
            --bg-version-controls: rgba(31, 41, 55, 0.98);

            /* Borders & shadows */
            --border-light: rgba(55, 65, 81, 0.8);
            --border-gray: #374151;
            --shadow-pane: 4px 0 20px rgba(0, 0, 0, 0.5);
            --shadow-element: 0 2px 8px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);

            /* Text colors */
            --text-primary: #f9fafb;
            --text-secondary: #d1d5db;
            --text-muted: #9ca3af;
            --text-label: #e5e7eb;

            /* Input & control colors */
            --bg-input: linear-gradient(145deg, #374151 0%, #1f2937 100%);
            --bg-input-hover: linear-gradient(145deg, #4b5563 0%, #374151 100%);
            --bg-input-focus: linear-gradient(145deg, #4b5563 0%, #374151 100%);
            --border-input: #4b5563;
            --border-input-hover: #8b5cf6;
            --border-input-focus: #a78bfa;

            /* Section controls */
            --bg-section: linear-gradient(145deg, #1f2937 0%, #111827 100%);
            --bg-section-hover: linear-gradient(145deg, #374151 0%, #1f2937 100%);
            --border-section: #374151;
            --border-section-hover: #8b5cf6;

            /* Splitter */
            --bg-splitter: linear-gradient(135deg, #374151 0%, #4b5563 100%);
            --bg-splitter-hover: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
            --bg-splitter-active: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);

            /* Scrollbar */
            --scrollbar-thumb: linear-gradient(180deg, rgba(75, 85, 99, 0.7), rgba(55, 65, 81, 0.7));
            --scrollbar-thumb-hover: linear-gradient(180deg, rgba(107, 114, 128, 0.9), rgba(75, 85, 99, 0.9));

            /* Skeleton loader */
            --skeleton-bg: linear-gradient(90deg, #374151 0%, #4b5563 50%, #374151 100%);

            /* Drawers & Modals */
            --bg-drawer: #1f2937;
            --bg-modal: #1f2937;
            --border-drawer: #374151;
        }