// Design Tokens - 适配 Ant Design Vue 4.x 的设计系统
// 使用直接的值而非 LESS 变量，因为 ADV 4.x 使用 CSS-in-JS

// ===== 颜色系统 =====
@primary-color: #1890ff;
@primary-color-hover: #40a9ff;
@primary-color-active: #096dd9;
@success-color: #52c41a;
@success-color-hover: #73d13d;
@warning-color: #faad14;
@error-color: #ff4d4f;
@error-color-hover: #ff7875;
@info-color: #1890ff;

// ===== 间距系统 =====
@spacing-xs: 4px;
@spacing-sm: 8px;
@spacing-md: 12px;
@spacing-lg: 16px;
@spacing-xl: 24px;
@spacing-xxl: 32px;

// ===== 背景色系统 =====
@bg-color-page: #f5f5f5;
@bg-color-container: #ffffff;
@bg-color-hover: #f5f5f5;
@background-color-light: #fafafa;
@component-background: #ffffff;

// 灰色系统（用于滚动条等元素）
@gray-1: #ffffff;
@gray-2: #fafafa;
@gray-3: #f5f5f5;
@gray-4: #f0f0f0;
@gray-300: #d1d5db;
@gray-5: #d9d9d9;
@gray-6: #bfbfbf;
@gray-7: #8c8c8c;
@gray-8: #595959;
@gray-9: #434343;
@gray-10: #262626;

// ===== 文本颜色系统 =====
@text-color-primary: #262626;
@text-color-secondary: #8c8c8c;
@text-color-tertiary: #bfbfbf;
@text-color-disabled: #d9d9d9;
@text-color: #262626;

// ===== 边框系统 =====
@border-color: #f0f0f0;
@border-color-base: #f0f0f0;
@border-color-light: #f5f5f5;
@border-color-dark: #d9d9d9;
@border-radius-sm: 4px;
@border-radius-base: 6px;
@border-radius-md: 6px;
@border-radius-lg: 8px;

// ===== 阴影系统 =====
@shadow-card: 0 1px 2px rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px rgba(0, 0, 0, 0.02);
@shadow-popup: 0 6px 16px rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
@shadow-button: 0 1px 2px rgba(0, 0, 0, 0.05);
@shadow-button-hover: 0 2px 4px rgba(0, 0, 0, 0.1);
@box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.06);

// ===== 字体系统 =====
@font-size-xs: 11px;
@font-size-sm: 12px;
@font-size-base: 14px;
@font-size-md: 14px;
@font-size-lg: 16px;
@font-size-xl: 18px;
@font-size-xxl: 20px;

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

@line-height-tight: 1.2;
@line-height-base: 1.5;
@line-height-relaxed: 1.6;

@font-family-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;

// ===== 动画系统 =====
@animation-fast: all 0.1s ease-out;
@animation-base: all 0.2s ease-out;
@animation-slow: all 0.3s ease-out;
@animation-duration-slow: 0.3s;

// ===== 响应式断点 =====
@screen-xs: 480px;
@screen-sm: 576px;
@screen-md: 768px;
@screen-lg: 992px;
@screen-xl: 1200px;
@screen-xxl: 1440px;

// ===== 扩展色板（保持现有视觉不变的精确映射） =====
// Tailwind/系统常用色（用于视图局部样式）
@slate-50: #f8fafc;
@slate-100: #f1f5f9;
@slate-200: #e2e8f0;
@slate-300: #cbd5e1;
@slate-400: #94a3b8;
@slate-500: #64748b;
@slate-600: #475569;
@slate-700: #334155;
@slate-800: #1e293b;

@blue-50: #eff6ff;
@blue-100: #dbeafe;
@blue-200: #bfdbfe;
@blue-500: #3b82f6;
@blue-600: #2563eb;
@blue-700: #1d4ed8;

@red-600: #dc2626;
@red-700: #b91c1c;

@green-50: #f0fdf4;
@green-200: #bbf7d0;
@green-600: #16a34a;
@green-700: #15803d;

@purple-600: #7c3aed;

@teal-600: #059669; // 用于“配置”标记背景

@gray-400: #9ca3af; // 空状态/次要提示
@gray-700: #374151; // 文本深色（Tailwind gray-700）

// ===== 语义化别名（可读性更强） =====
@header-shadow: 0 1px 4px 0 rgba(0, 21, 41, 0.12);
@sidebar-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
@shadow-xs-05: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
@shadow-md-10: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
@shadow-lg-ring-blue: 0 0 0 3px rgba(59, 130, 246, 0.1);

@border-color-200: #e5e7eb; // 与 Tailwind gray-200 对齐

// 布局相关
@layout-gradient-start: #f9fafb; // 背景渐变起点
@layout-gradient-end: #f3f4f6;   // 背景渐变终点
@layout-sidebar-width: 288px;    // 侧边栏固定宽度
@layout-sidebar-width-collapsed: 64px; // 侧边栏折叠宽度（图标栏）

// 自定义断点（用于当前布局的响应式策略）
@bp-sm: 1024px;  // 抽屉化阈值
@bp-md: 1366px;  // 自动折叠阈值
@bp-lg: 1600px;  // 大屏优化起点

// 交互/悬浮
@header-hover-bg: rgba(0, 0, 0, 0.025);

// ===== 扩展间距与尺寸 =====
@spacing-lgx: 20px; // 介于 16 与 24 之间，当前视图使用
@spacing-xxxl: 40px;

// 扩展圆角
@border-radius-xl: 12px;

// 扩展字号
@font-size-2xs: 10px;
@font-size-2sm: 13px;
@font-size-2lg: 15px;

// 扩展行高/字距
@line-height-compact: 1.4;
