/* ============================================================
   WebTrader Pro - Design System Variables
   Dark/Light Theme with Blue accent
   ============================================================ */

:root,
[data-theme="dark"] {
    /* Background hierarchy */
    --bg-primary: #0a0e17;
    --bg-secondary: #111827;
    --bg-tertiary: #1f2937;
    --bg-quaternary: #273344;
    --bg-input: #0f1724;
    --bg-modal: rgba(0, 0, 0, 0.7);
    --bg-hover: rgba(255, 255, 255, 0.03);

    /* Brand - Blue accent */
    --accent: #3b82f6;
    --accent-hover: #2563eb;
    --accent-active: #1d4ed8;
    --accent-subtle: rgba(59, 130, 246, 0.1);
    --accent-glow: rgba(59, 130, 246, 0.25);
    --accent-text: #60a5fa;

    /* Text */
    --text-primary: #f9fafb;
    --text-secondary: #9ca3af;
    --text-tertiary: #6b7280;
    --text-disabled: #4b5563;
    --text-inverse: #111827;
    --text-link: #60a5fa;

    /* Trading colors */
    --profit: #10b981;
    --profit-bg: rgba(16, 185, 129, 0.1);
    --profit-glow: rgba(16, 185, 129, 0.25);
    --loss: #ef4444;
    --loss-bg: rgba(239, 68, 68, 0.1);
    --loss-glow: rgba(239, 68, 68, 0.25);
    --buy: #10b981;
    --sell: #ef4444;
    --warning: #f59e0b;
    --warning-bg: rgba(245, 158, 11, 0.1);
    --info: #3b82f6;
    --info-bg: rgba(59, 130, 246, 0.1);

    /* Borders */
    --border: #1f2937;
    --border-secondary: #374151;
    --border-focus: #3b82f6;
    --border-error: #ef4444;
    --border-success: #10b981;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.6);
    --glow-blue: 0 0 20px rgba(59, 130, 246, 0.15);
    --glow-green: 0 0 15px rgba(16, 185, 129, 0.2);
    --glow-red: 0 0 15px rgba(239, 68, 68, 0.2);

    /* Spacing */
    --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
    --sp-5: 20px; --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
    --sp-12: 48px; --sp-16: 64px;

    /* Typography */
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    --fs-xs: 11px;  --fs-sm: 12px;  --fs-base: 13px;
    --fs-md: 14px;  --fs-lg: 16px;  --fs-xl: 18px;
    --fs-2xl: 24px; --fs-3xl: 30px; --fs-4xl: 36px;
    --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
    --lh-tight: 1.25; --lh-normal: 1.5; --lh-relaxed: 1.75;

    /* Border radius */
    --radius-sm: 4px;  --radius-md: 6px;  --radius-lg: 8px;
    --radius-xl: 12px; --radius-2xl: 16px; --radius-full: 9999px;

    /* Transitions */
    --tr-fast: 150ms ease;
    --tr-normal: 250ms ease;
    --tr-slow: 350ms ease;

    /* Z-index */
    --z-dropdown: 100;  --z-sticky: 200;   --z-modal-bg: 300;
    --z-modal: 400;     --z-popover: 500;   --z-tooltip: 600;
    --z-toast: 700;     --z-max: 9999;

    /* Layout */
    --sidebar-w: 260px;
    --sidebar-collapsed-w: 64px;
    --header-h: 56px;
    --panel-min-w: 280px;

    /* Scrollbar */
    --scrollbar-w: 6px;
    --scrollbar-track: transparent;
    --scrollbar-thumb: #374151;
    --scrollbar-thumb-hover: #4b5563;

    /* Backwards-compatible aliases */
    --primary: var(--accent);
    --primary-hover: var(--accent-hover);
    --success: var(--profit);
    --danger: var(--loss);
    --text-muted: var(--text-tertiary);
    --border-light: rgba(255, 255, 255, 0.04);
    --font-primary: var(--font);
    --transition-fast: var(--tr-fast);
    --transition-normal: var(--tr-normal);
    --spacing-1: var(--sp-1);
    --spacing-2: var(--sp-2);
    --spacing-3: var(--sp-3);
    --spacing-4: var(--sp-4);
    --spacing-5: var(--sp-5);
    --spacing-6: var(--sp-6);
    --spacing-8: var(--sp-8);
    --radius-sm: var(--radius-sm);
    --radius-md: var(--radius-md);
    --radius-lg: var(--radius-lg);
}

/* ============ LIGHT THEME ============ */
[data-theme="light"] {
    --bg-primary: #f8fafc;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f1f5f9;
    --bg-quaternary: #e2e8f0;
    --bg-input: #ffffff;
    --bg-modal: rgba(0, 0, 0, 0.4);
    --bg-hover: rgba(0, 0, 0, 0.02);

    --accent: #2563eb;
    --accent-hover: #1d4ed8;
    --accent-active: #1e40af;
    --accent-subtle: rgba(37, 99, 235, 0.08);
    --accent-glow: rgba(37, 99, 235, 0.12);
    --accent-text: #2563eb;

    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-tertiary: #94a3b8;
    --text-disabled: #cbd5e1;
    --text-inverse: #f9fafb;
    --text-link: #2563eb;

    --profit: #059669;
    --profit-bg: rgba(5, 150, 105, 0.08);
    --loss: #dc2626;
    --loss-bg: rgba(220, 38, 38, 0.08);
    --buy: #059669;
    --sell: #dc2626;
    --warning: #d97706;
    --warning-bg: rgba(217, 119, 6, 0.08);

    --border: #e2e8f0;
    --border-secondary: #cbd5e1;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.08);
    --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.1);
    --glow-blue: 0 0 20px rgba(37, 99, 235, 0.08);

    --scrollbar-thumb: #cbd5e1;
    --scrollbar-thumb-hover: #94a3b8;

    --primary: var(--accent);
    --success: var(--profit);
    --danger: var(--loss);
    --text-muted: var(--text-tertiary);
    --border-light: rgba(0, 0, 0, 0.04);
}