/* CSS Variables - Design System */
:root {
    /* Primary Colors */
    --primary: #6366f1;
    --primary-light: #818cf8;
    --primary-dark: #4f46e5;
    --primary-bg: rgba(99, 102, 241, 0.1);

    /* Semantic Colors */
    --success: #10b981;
    --success-light: #34d399;
    --success-dark: #059669;
    --success-bg: rgba(16, 185, 129, 0.1);

    --danger: #ef4444;
    --danger-light: #f87171;
    --danger-dark: #dc2626;
    --danger-bg: rgba(239, 68, 68, 0.1);

    --warning: #f59e0b;
    --warning-light: #fbbf24;
    --warning-dark: #d97706;
    --warning-bg: rgba(245, 158, 11, 0.1);

    --purple: #a855f7;
    --purple-light: #c084fc;
    --purple-dark: #9333ea;

    /* Background Colors */
    --bg-main: #f8f9fc;
    --bg-card: #ffffff;
    --bg-sidebar: #ffffff;
    --bg-hover: #f1f5f9;
    --bg-active: #e0e7ff;

    /* Border Colors */
    --border-color: #e5e7eb;
    --border-light: #f1f5f9;

    /* Text Colors */
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-hint: #94a3b8;
    --text-disabled: #cbd5e1;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.06);

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

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

    /* Typography */
    --font-family: 'Microsoft YaHei UI', 'Segoe UI', 'PingFang SC', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', 'Consolas', 'Monaco', monospace;

    --font-size-xs: 12px;
    --font-size-sm: 13px;
    --font-size-base: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-2xl: 22px;
    --font-size-3xl: 28px;

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;

    /* Z-index */
    --z-dropdown: 100;
    --z-modal: 1000;
    --z-toast: 1100;

    /* Sidebar */
    --sidebar-width: 240px;
}

/* Dark Theme (VS Code Style) */
[data-theme="vscode-dark"] {
    --bg-main: #1e1e1e;
    --bg-card: #252526;
    --bg-sidebar: #333333;
    --bg-hover: #2a2d2e;
    --bg-active: #37373d;

    --border-color: #454545;
    --border-light: #2d2d2d;

    --text-primary: #cccccc;
    --text-secondary: #858585;
    --text-hint: #6b6b6b;
    --text-disabled: #4d4d4d;

    --primary: #007acc;
    --primary-light: #3794ce;
    --primary-dark: #005f9e;
    --primary-bg: rgba(0, 122, 204, 0.1);

    --success: #059669;
    --success-light: #10b981;
    --success-dark: #047857;

    --danger: #dc2626;
    --danger-light: #ef4444;
    --danger-dark: #b91c1c;

    --warning: #d97706;
    --warning-light: #f59e0b;
    --warning-dark: #b45309;

    --purple: #9333ea;
    --purple-light: #a855f7;
    --purple-dark: #7e22ce;
    
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.24);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
    --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.24);
}

/* Transparent Dark Blue Theme */
[data-theme="transparent-blue"] {
    --bg-main: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
    --bg-card: rgba(30, 41, 59, 0.7);
    --bg-sidebar: rgba(15, 23, 42, 0.8);
    --bg-hover: rgba(51, 65, 85, 0.6);
    --bg-active: rgba(56, 189, 248, 0.15);

    --border-color: rgba(71, 85, 105, 0.4);
    --border-light: rgba(51, 65, 85, 0.3);

    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-hint: #64748b;
    --text-disabled: #475569;

    --primary: #38bdf8;
    --primary-light: #7dd3fc;
    --primary-dark: #0284c7;
    --primary-bg: rgba(56, 189, 248, 0.1);

    --success: rgba(16, 185, 129, 0.8);
    --success-light: rgba(52, 211, 153, 0.8);
    --success-dark: rgba(5, 150, 105, 0.8);

    --danger: rgba(239, 68, 68, 0.8);
    --danger-light: rgba(248, 113, 113, 0.8);
    --danger-dark: rgba(220, 38, 38, 0.8);

    --warning: rgba(245, 158, 11, 0.8);
    --warning-light: rgba(251, 191, 36, 0.8);
    --warning-dark: rgba(217, 119, 6, 0.8);

    --purple: rgba(168, 85, 247, 0.8);
    --purple-light: rgba(192, 132, 252, 0.8);
    --purple-dark: rgba(147, 51, 234, 0.8);

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
    --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4);
}