/* ==================== 统一颜色系统 ==================== */
/* 方案A: 现代蓝紫渐变主题 */

:root {
    /* ===== 主色系 - 蓝紫色 (Indigo) ===== */
    --primary-50: #eef2ff;
    --primary-100: #e0e7ff;
    --primary-200: #c7d2fe;
    --primary-300: #a5b4fc;
    --primary-400: #818cf8;
    --primary-500: #6366f1;
    /* 主色 */
    --primary-600: #4f46e5;
    --primary-700: #4338ca;
    --primary-800: #3730a3;
    --primary-900: #312e81;

    /* 简化变量 */
    --primary-color: var(--primary-500);
    --primary-light: var(--primary-400);
    --primary-dark: var(--primary-600);

    /* ===== 辅助色系 - 紫色 (Purple) ===== */
    --secondary-50: #faf5ff;
    --secondary-100: #f3e8ff;
    --secondary-200: #e9d5ff;
    --secondary-300: #d8b4fe;
    --secondary-400: #c084fc;
    --secondary-500: #a855f7;
    /* 辅助色 */
    --secondary-600: #9333ea;
    --secondary-700: #7e22ce;
    --secondary-800: #6b21a8;
    --secondary-900: #581c87;

    /* 简化变量 */
    --secondary-color: var(--secondary-500);

    /* ===== 强调色系 - 粉色 (Pink) ===== */
    --accent-50: #fdf2f8;
    --accent-100: #fce7f3;
    --accent-200: #fbcfe8;
    --accent-300: #f9a8d4;
    --accent-400: #f472b6;
    --accent-500: #ec4899;
    /* 强调色 */
    --accent-600: #db2777;
    --accent-700: #be185d;
    --accent-800: #9d174d;
    --accent-900: #831843;

    /* 简化变量 */
    --accent-color: var(--accent-500);

    /* ===== 语义化颜色 ===== */
    /* 成功 - 绿色 */
    --color-success: #10b981;
    --color-success-light: #34d399;
    --color-success-dark: #059669;
    --color-success-bg: rgba(16, 185, 129, 0.1);

    /* 警告 - 黄色 */
    --color-warning: #f59e0b;
    --color-warning-light: #fbbf24;
    --color-warning-dark: #d97706;
    --color-warning-bg: rgba(245, 158, 11, 0.1);

    /* 错误 - 红色 */
    --color-error: #ef4444;
    --color-error-light: #f87171;
    --color-error-dark: #dc2626;
    --color-error-bg: rgba(239, 68, 68, 0.1);

    /* 信息 - 蓝色 */
    --color-info: #3b82f6;
    --color-info-light: #60a5fa;
    --color-info-dark: #2563eb;
    --color-info-bg: rgba(59, 130, 246, 0.1);

    /* ===== 渐变色 ===== */
    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-secondary: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
    --gradient-success: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    --gradient-hero: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
    --gradient-warm: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --gradient-cool: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);

    /* ===== 背景颜色 (暗色主题) ===== */
    --bg-primary: #0f172a;
    /* Slate 900 */
    --bg-secondary: #1e293b;
    /* Slate 800 */
    --bg-tertiary: #334155;
    /* Slate 700 */
    --bg-card: rgba(30, 41, 59, 0.8);
    --bg-overlay: rgba(0, 0, 0, 0.7);
    --bg-hover: rgba(99, 102, 241, 0.1);

    /* ===== 文字颜色 (暗色主题) ===== */
    --text-primary: #f1f5f9;
    /* Slate 100 */
    --text-secondary: #cbd5e1;
    /* Slate 300 */
    --text-muted: #94a3b8;
    /* Slate 400 */
    --text-inverse: #1f2937;
    /* Gray 800 */

    /* ===== 边框颜色 ===== */
    --border-color: rgba(148, 163, 184, 0.2);
    --border-color-hover: rgba(148, 163, 184, 0.4);
    --border-color-focus: var(--primary-color);

    /* ===== 阴影 ===== */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.1);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.3);
    --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.4);

    /* ===== 圆角 ===== */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-2xl: 32px;
    --radius-full: 9999px;

    /* ===== 间距系统 ===== */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;

    /* ===== 字体大小 ===== */
    --font-xs: 0.75rem;
    /* 12px */
    --font-sm: 0.875rem;
    /* 14px */
    --font-base: 1rem;
    /* 16px */
    --font-lg: 1.125rem;
    /* 18px */
    --font-xl: 1.25rem;
    /* 20px */
    --font-2xl: 1.5rem;
    /* 24px */
    --font-3xl: 1.875rem;
    /* 30px */
    --font-4xl: 2.25rem;
    /* 36px */

    /* ===== 动画时间 ===== */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* ===== Z-index层级 ===== */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}

/* ===== 亮色主题 ===== */
[data-theme="light"] {
    /* 背景颜色 - 柔和的灰白色系 */
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    /* Slate 50 */
    --bg-tertiary: #f1f5f9;
    /* Slate 100 */
    --bg-card: rgba(255, 255, 255, 0.95);
    --bg-overlay: rgba(0, 0, 0, 0.5);
    --bg-hover: rgba(99, 102, 241, 0.05);

    /* 文字颜色 - 深色文字 */
    --text-primary: #0f172a;
    /* Slate 900 */
    --text-secondary: #475569;
    /* Slate 600 */
    --text-muted: #64748b;
    /* Slate 500 */
    --text-inverse: #f9fafb;
    /* Gray 50 */

    /* 边框颜色 - 更明显 */
    --border-color: rgba(148, 163, 184, 0.3);
    --border-color-hover: rgba(148, 163, 184, 0.5);

    /* 阴影 - 柔和 */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
    --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);

    /* 状态颜色背景 - 白天模式更柔和 */
    --color-success-bg: rgba(16, 185, 129, 0.08);
    --color-warning-bg: rgba(245, 158, 11, 0.08);
    --color-error-bg: rgba(239, 68, 68, 0.08);
    --color-info-bg: rgba(59, 130, 246, 0.08);
}

/* ===== 状态颜色工具类 ===== */
.text-success {
    color: var(--color-success);
}

.text-warning {
    color: var(--color-warning);
}

.text-error {
    color: var(--color-error);
}

.text-info {
    color: var(--color-info);
}

.bg-success {
    background-color: var(--color-success-bg);
    border-left: 4px solid var(--color-success);
}

.bg-warning {
    background-color: var(--color-warning-bg);
    border-left: 4px solid var(--color-warning);
}

.bg-error {
    background-color: var(--color-error-bg);
    border-left: 4px solid var(--color-error);
}

.bg-info {
    background-color: var(--color-info-bg);
    border-left: 4px solid var(--color-info);
}

.border-success {
    border-color: var(--color-success);
}

.border-warning {
    border-color: var(--color-warning);
}

.border-error {
    border-color: var(--color-error);
}

.border-info {
    border-color: var(--color-info);
}

/* ===== 渐变背景工具类 ===== */
.gradient-primary {
    background: var(--gradient-primary);
}

.gradient-secondary {
    background: var(--gradient-secondary);
}

.gradient-success {
    background: var(--gradient-success);
}

.gradient-hero {
    background: var(--gradient-hero);
}