/**
 * design-tokens-v3.css - 全局统一设计令牌
 * 
 * 版本: v3.0
 * 创建时间: 2026-07-03
 * 用途: 作为项目中唯一的 CSS 变量定义源
 * 
 * 功能:
 * - 统一主色调为 #6366f1 (Indigo)
 * - 统一功能色（success/danger/warning/info）
 * - 统一圆角体系
 * - 统一间距体系
 * - 统一阴影体系
 * - 统一层级体系
 * - 提供页面级强调色机制
 * 
 * 使用方式:
 * 在 HTML 中引用此文件，替代 design-tokens.css / common.core.css 中的变量定义
 * 
 * 注意:
 * - 其他 CSS 文件中的 :root 变量定义应删除，避免冲突
 * - 页面级强调色通过 [data-page] 属性设置
 */

:root {
  /* ==================== 主色调 (Primary) ==================== */
  /* 统一主色为 Indigo (#6366f1) */
  --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: var(--primary-500);
  --primary-hover: var(--primary-600);
  --primary-active: var(--primary-700);
  
  /* ==================== 功能色 (Semantic Colors) ==================== */
  /* Success - 绿色 */
  --success-50: #ecfdf5;
  --success-100: #d1fae5;
  --success-200: #a7f3d0;
  --success-300: #6ee7b7;
  --success-400: #34d399;
  --success-500: #10b981;   /* 统一值 */
  --success-600: #059669;
  --success-700: #047857;
  --success-800: #065f46;
  --success-900: #064e3b;
  
  --success: var(--success-500);
  --success-hover: var(--success-600);
  
  /* Warning - 黄色 */
  --warning-50: #fffbeb;
  --warning-100: #fef3c7;
  --warning-200: #fde68a;
  --warning-300: #fcd34d;
  --warning-400: #fbbf24;
  --warning-500: #f59e0b;
  --warning-600: #d97706;
  --warning-700: #b45309;
  --warning-800: #92400e;
  --warning-900: #78350f;
  
  --warning: var(--warning-500);
  --warning-hover: var(--warning-600);
  
  /* Danger/Error - 红色 */
  --danger-50: #fef2f2;
  --danger-100: #fee2e2;
  --danger-200: #fecaca;
  --danger-300: #fca5a5;
  --danger-400: #f87171;
  --danger-500: #ef4444;   /* 统一值 */
  --danger-600: #dc2626;
  --danger-700: #b91c1c;
  --danger-800: #991b1b;
  --danger-900: #7f1d1d;
  
  --danger: var(--danger-500);
  --danger-hover: var(--danger-600);
  
  /* Info - 天蓝色 */
  --info-50: #f0f9ff;
  --info-100: #e0f2fe;
  --info-200: #bae6fd;
  --info-300: #7dd3fc;
  --info-400: #38bdf8;
  --info-500: #0ea5e9;
  --info-600: #0284c7;
  --info-700: #0369a1;
  --info-800: #075985;
  --info-900: #0c4a6e;
  
  --info: var(--info-500);
  --info-hover: var(--info-600);
  
  /* ==================== 中性色 (Neutral Colors) ==================== */
  /* Gray Scale */
  --gray-0: #ffffff;
  --gray-50: #f8fafc;      /* 统一值 */
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;
  
  /* 语义化背景色 */
  --bg-primary: var(--gray-0);
  --bg-secondary: var(--gray-50);
  --bg-tertiary: var(--gray-100);
  --bg-body: #f0f2f5;      /* 页面背景 */
  
  /* 语义化文字色 */
  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-tertiary: var(--gray-400);
  --text-inverse: var(--gray-0);
  --text-muted: var(--gray-500);
  
  /* 语义化边框色 */
  --border-light: var(--gray-100);
  --border-default: var(--gray-200);
  --border-dark: var(--gray-300);
  --border-focus: var(--primary-500);
  
  /* ==================== 圆角系统 (Border Radius) ==================== */
  /* 统一圆角值 */
  --radius-none: 0;
  --radius-sm: 6px;        /* 统一值 */
  --radius-md: 8px;        /* 统一值 */
  --radius-lg: 12px;       /* 统一值 */
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;
  
  /* ==================== 间距系统 (Spacing) ==================== */
  /* 基于 4px 基础单位 */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  
  /* ==================== 阴影系统 (Shadows) ==================== */
  /* 统一阴影值 */
  --shadow-none: none;
  --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-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  
  /* ==================== 层级系统 (Z-Index) ==================== */
  /* 统一层级值 */
  --z-dropdown: 200;
  --z-sticky: 300;
  --z-fixed: 400;
  --z-modal-backdrop: 1000;
  --z-modal: 1010;
  --z-popover: 1020;
  --z-tooltip: 1030;
  --z-toast: 9000;         /* 高于弹窗，确保提示可见 */
  
  /* ==================== 过渡动画 (Transitions) ==================== */
  --transition-none: none;
  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow: 500ms ease;
  
  /* ==================== 字体系统 (Typography) ==================== */
  --font-family-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
  
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 30px;
  --font-size-4xl: 36px;
  
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  
  /* ==================== 默认强调色 (Accent) ==================== */
  /* 默认与主色相同，页面级可通过 [data-page] 覆盖 */
  --accent: var(--primary);
  --accent-hover: var(--primary-hover);
}

/* ==================== 页面级强调色 (Page Accent Colors) ==================== */
/* 用于导航高亮、页面特色元素，不影响按钮/表单等全局组件 */

[data-page="data-center"] {
  --accent: #06b6d4;       /* Cyan */
  --accent-hover: #0891b2;
}

[data-page="accounts"] {
  --accent: #ec4899;       /* Pink */
  --accent-hover: #db2777;
}

[data-page="settings"] {
  --accent: #475569;       /* Slate Gray */
  --accent-hover: #334155;
}

[data-page="system-monitor"] {
  --accent: #e11d48;       /* Rose */
  --accent-hover: #be123c;
}

[data-page="ai-center"] {
  --accent: #8b5cf6;       /* Violet */
  --accent-hover: #7c3aed;
}

[data-page="tasks"] {
  --accent: #d97706;       /* Amber */
  --accent-hover: #b45309;
}

[data-page="quality-analysis"] {
  --accent: #6366f1;       /* Indigo (与主色相同) */
  --accent-hover: #4f46e5;
}

[data-page="task-intelligence-center"] {
  --accent: #3b82f6;       /* Blue */
  --accent-hover: #2563eb;
}

[data-page="wanxiangtai"] {
  --accent: #f97316;       /* Orange */
  --accent-hover: #ea580c;
}

[data-page="compare-v2"] {
  --accent: #0d9488;       /* Teal */
  --accent-hover: #0f766e;
}

/* ==================== 暗色模式支持 (Dark Mode) ==================== */
/* 如有需要，可在此添加暗色模式变量覆盖 */

@media (prefers-color-scheme: dark) {
  :root {
    /* 暗色模式变量（预留） */
    --bg-body: #0f172a;
    --bg-primary: #1e293b;
    --bg-secondary: #334155;
    
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-tertiary: #64748b;
    
    --border-light: #334155;
    --border-default: #475569;
    --border-dark: #64748b;
  }
}