/**
 * Console Theme - Design Tokens
 * 基于 Ant Design 5.0 设计规范，参考阿里云/京东云风格
 * 适用于中文 SaaS 后台系统
 * 
 * 设计原则：
 * - 使用 CSS Variables，无需构建工具
 * - 符合 Ant Design 5.0 Design Token 规范
 * - 适配中文显示和阅读习惯
 * - 风格偏向阿里云/京东云控制台
 */

:root {
  /* ============================================
   * 颜色系统 (Color System)
   * ============================================ */
  
  /* --- 品牌色 (Brand Colors) --- */
  /* 主色：品牌蓝，用于主要操作按钮、链接、选中状态 */
  --color-primary: #0067FF;
  --color-primary-hover: #0052CC;        /* 悬停状态 */
  --color-primary-active: #003D99;       /* 激活/按下状态 */
  --color-primary-light: #E6F2FF;       /* 浅色背景，用于标签、徽章 */
  --color-primary-lighter: #F0F7FF;      /* 更浅背景，用于悬停背景 */
  --color-primary-lightest: #F5F9FF;    /* 最浅背景，用于禁用状态背景 */
  
  /* 主色透明度变体，用于遮罩、叠加层 */
  --color-primary-1: rgba(0, 103, 255, 0.1);
  --color-primary-2: rgba(0, 103, 255, 0.2);
  --color-primary-3: rgba(0, 103, 255, 0.3);
  --color-primary-4: rgba(0, 103, 255, 0.4);
  --color-primary-5: rgba(0, 103, 255, 0.5);
  
  /* --- 功能色 (Functional Colors) --- */
  
  /* 成功色：用于成功提示、完成状态 */
  --color-success: #52C41A;
  --color-success-hover: #73D13D;
  --color-success-active: #389E0D;
  --color-success-light: #F6FFED;
  --color-success-lightest: #FCFFE6;
  
  /* 警告色：用于警告提示、待处理状态 */
  --color-warning: #FAAD14;
  --color-warning-hover: #FFC53D;
  --color-warning-active: #D46B08;
  --color-warning-light: #FFFBE6;
  --color-warning-lightest: #FFF7E6;
  
  /* 错误色：用于错误提示、危险操作 */
  --color-error: #FF4D4F;
  --color-error-hover: #FF7875;
  --color-error-active: #CF1322;
  --color-error-light: #FFF1F0;
  --color-error-lightest: #FFF2F0;
  
  /* 信息色：用于信息提示、说明文字 */
  --color-info: #1890FF;
  --color-info-hover: #40A9FF;
  --color-info-active: #096DD9;
  --color-info-light: #E6F7FF;
  --color-info-lightest: #F0F7FF;
  
  /* --- 中性色 (Neutral Colors) --- */
  
  /* 文本颜色 - 用于不同层级的文本内容 */
  --color-text-title: #262626;          /* 标题文本，最高对比度 */
  --color-text-primary: #262626;        /* 主要文本，正文内容 */
  --color-text-secondary: #595959;     /* 次要文本，辅助说明 */
  --color-text-tertiary: #8C8C8C;      /* 三级文本，占位符、提示 */
  --color-text-disabled: #BFBFBF;      /* 禁用文本 */
  --color-text-inverse: #FFFFFF;       /* 反色文本，用于深色背景 */
  --color-text-link: var(--color-primary);           /* 链接文本 */
  --color-text-link-hover: var(--color-primary-hover); /* 链接悬停 */
  
  /* 边框颜色 - 用于分割线、边框 */
  --color-border-base: #D9D9D9;        /* 默认边框 */
  --color-border-light: #E8E8E8;      /* 浅色边框，分割线 */
  --color-border-lighter: #F0F0F0;    /* 更浅边框，内部分割 */
  --color-border-lightest: #F5F5F5;   /* 最浅边框，卡片内部分割 */
  --color-border-focus: var(--color-primary);        /* 聚焦边框 */
  --color-border-error: var(--color-error);         /* 错误边框 */
  
  /* 背景颜色 - 用于不同层级的背景 */
  --color-bg-base: #FFFFFF;            /* 基础背景，卡片、面板 */
  --color-bg-body: #F5F5F5;            /* 页面背景 */
  --color-bg-container: #FAFAFA;      /* 容器背景，表格头部 */
  --color-bg-hover: #F5F5F5;          /* 悬停背景 */
  --color-bg-active: #E6E6E6;         /* 激活背景 */
  --color-bg-selected: var(--color-primary-lighter); /* 选中背景 */
  --color-bg-disabled: #F5F5F5;       /* 禁用背景 */
  --color-bg-overlay: rgba(0, 0, 0, 0.45); /* 遮罩层背景 */
  
  /* 填充颜色 - 用于图标、装饰元素 */
  --color-fill-base: #FAFAFA;         /* 基础填充 */
  --color-fill-secondary: #F5F5F5;    /* 次要填充 */
  --color-fill-tertiary: #F0F0F0;     /* 三级填充 */
  --color-fill-quaternary: #EBEBEB;   /* 四级填充 */
  
  /* --- 侧边栏颜色 (Sidebar Colors) --- */
  /* 深色侧边栏，参考阿里云控制台 */
  --color-sidebar-bg: #001529;        /* 侧边栏背景 */
  --color-sidebar-bg-hover: rgba(255, 255, 255, 0.08); /* 菜单项悬停 */
  --color-sidebar-bg-active: var(--color-primary);     /* 菜单项激活 */
  --color-sidebar-text: rgba(255, 255, 255, 0.85);    /* 菜单文本 */
  --color-sidebar-text-hover: #FFFFFF;                 /* 菜单文本悬停 */
  --color-sidebar-text-active: #FFFFFF;                /* 菜单文本激活 */
  --color-sidebar-text-disabled: rgba(255, 255, 255, 0.25); /* 菜单文本禁用 */
  --color-sidebar-border: rgba(255, 255, 255, 0.1);   /* 侧边栏边框 */
  
  /* ============================================
   * 字体系统 (Typography System)
   * ============================================ */
  
  /* --- 字体族 (Font Family) --- */
  /* 优先使用中文字体，确保中文显示效果 */
  --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', 
                       'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 
                       'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-family-code: 'SFMono-Regular', 'Monaco', 'Consolas', 
                      'Liberation Mono', 'Menlo', 'Courier New', monospace;
  --font-family-number: 'Helvetica Neue', 'Arial', sans-serif; /* 数字专用字体 */
  
  /* --- 字号 (Font Size) --- */
  /* 基于 12px 基准，适合中文阅读 */
  --font-size-xs: 12px;      /* 辅助文字、标签 */
  --font-size-sm: 14px;      /* 次要文字、说明 */
  --font-size-base: 14px;    /* 基础文字、正文 */
  --font-size-md: 16px;      /* 中等文字、小标题 */
  --font-size-lg: 18px;      /* 大号文字、标题 */
  --font-size-xl: 20px;      /* 超大文字、大标题 */
  --font-size-xxl: 24px;     /* 特大文字、页面标题 */
  --font-size-xxxl: 30px;    /* 巨大文字、主标题 */
  --font-size-display: 38px; /* 展示文字、数据大屏 */
  
  /* --- 字重 (Font Weight) --- */
  --font-weight-light: 300;      /* 细体 */
  --font-weight-normal: 400;      /* 常规 */
  --font-weight-medium: 500;      /* 中等 */
  --font-weight-semibold: 600;    /* 半粗 */
  --font-weight-bold: 700;        /* 粗体 */
  
  /* --- 行高 (Line Height) --- */
  /* 适合中文阅读的行高比例 */
  --line-height-tight: 1.4;       /* 紧凑行高，用于标题 */
  --line-height-base: 1.5715;     /* 基础行高，用于正文 */
  --line-height-loose: 1.75;      /* 宽松行高，用于长文本 */
  
  /* --- 字间距 (Letter Spacing) --- */
  --letter-spacing-tight: -0.5px;  /* 紧凑字间距 */
  --letter-spacing-normal: 0;      /* 正常字间距 */
  --letter-spacing-wide: 0.5px;    /* 宽松字间距 */
  
  /* ============================================
   * 间距系统 (Spacing System)
   * ============================================ */
  
  /* 基于 4px 基准的间距系统，符合 Ant Design 规范 */
  --spacing-base: 4px;             /* 基础单位 */
  
  --spacing-0: 0;
  --spacing-xs: 4px;                /* 极小间距，图标与文字 */
  --spacing-sm: 8px;                /* 小间距，紧密元素 */
  --spacing-md: 12px;               /* 中等间距，常规元素 */
  --spacing-lg: 16px;               /* 大间距，卡片内边距 */
  --spacing-xl: 24px;               /* 超大间距，卡片间距 */
  --spacing-xxl: 32px;              /* 特大间距，区块间距 */
  --spacing-xxxl: 48px;             /* 巨大间距，页面边距 */
  --spacing-xxxxl: 64px;            /* 超大间距，大区块间距 */
  
  /* 内边距预设 */
  --padding-xs: var(--spacing-xs) var(--spacing-sm);
  --padding-sm: var(--spacing-sm) var(--spacing-md);
  --padding-md: var(--spacing-md) var(--spacing-lg);
  --padding-lg: var(--spacing-lg) var(--spacing-xl);
  --padding-xl: var(--spacing-xl) var(--spacing-xxl);
  
  /* 外边距预设 */
  --margin-xs: var(--spacing-xs);
  --margin-sm: var(--spacing-sm);
  --margin-md: var(--spacing-md);
  --margin-lg: var(--spacing-lg);
  --margin-xl: var(--spacing-xl);
  --margin-xxl: var(--spacing-xxl);
  
  /* ============================================
   * 圆角系统 (Border Radius System)
   * ============================================ */
  
  /* 基于 2px 基准的圆角系统 */
  --border-radius-none: 0;
  --border-radius-xs: 2px;          /* 极小圆角，标签、徽章 */
  --border-radius-sm: 2px;           /* 小圆角，按钮、输入框 */
  --border-radius-base: 4px;        /* 基础圆角，卡片 */
  --border-radius-md: 6px;          /* 中等圆角，大卡片 */
  --border-radius-lg: 8px;          /* 大圆角，模态框 */
  --border-radius-xl: 12px;         /* 超大圆角，特殊卡片 */
  --border-radius-circle: 50%;      /* 圆形，头像、图标按钮 */
  --border-radius-round: 9999px;    /* 圆角，胶囊按钮 */
  
  /* ============================================
   * 阴影系统 (Shadow System)
   * ============================================ */
  
  /* 多层级阴影，营造层次感 */
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.03);      /* 极小阴影，轻微提升 */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);      /* 小阴影，标签、徽章 */
  --shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15);    /* 基础阴影，卡片 */
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);     /* 中等阴影，悬浮卡片 */
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);      /* 大阴影，模态框 */
  --shadow-xl: 0 12px 48px rgba(0, 0, 0, 0.15);     /* 超大阴影，弹窗 */
  
  /* 内阴影 */
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
  
  /* 聚焦阴影 */
  --shadow-focus: 0 0 0 2px rgba(0, 103, 255, 0.2); /* 聚焦外发光 */
  --shadow-focus-error: 0 0 0 2px rgba(255, 77, 79, 0.2); /* 错误聚焦 */
  
  /* ============================================
   * 布局尺寸 (Layout Dimensions)
   * ============================================ */
  
  /* 头部高度 */
  --header-height: 64px;
  --header-height-sm: 56px;          /* 小屏幕头部 */
  
  /* 侧边栏宽度 */
  --sidebar-width: 240px;            /* 展开宽度 */
  --sidebar-width-collapsed: 80px;   /* 折叠宽度 */
  --sidebar-width-mobile: 280px;     /* 移动端宽度 */
  
  /* 内容区域 */
  --content-max-width: 1200px;       /* 最大内容宽度 */
  --content-padding: var(--spacing-xl); /* 内容内边距 */
  
  /* 底部高度 */
  --footer-height: 60px;
  
  /* 表格 */
  --table-header-height: 48px;
  --table-row-height: 48px;
  --table-row-height-sm: 40px;
  
  /* 表单元素 */
  --form-item-height: 32px;         /* 输入框高度 */
  --form-item-height-lg: 40px;      /* 大号输入框 */
  --form-item-height-sm: 24px;      /* 小号输入框 */
  
  /* ============================================
   * 响应式断点 (Breakpoints)
   * ============================================ */
  
  /* 移动优先的断点系统 */
  --breakpoint-xs: 480px;           /* 超小屏，手机竖屏 */
  --breakpoint-sm: 768px;            /* 小屏，手机横屏、平板竖屏 */
  --breakpoint-md: 1024px;           /* 中屏，平板横屏 */
  --breakpoint-lg: 1280px;           /* 大屏，桌面 */
  --breakpoint-xl: 1440px;           /* 超大屏，大桌面 */
  --breakpoint-xxl: 1920px;          /* 超超大屏，4K */
  
  /* ============================================
   * 过渡动画 (Transitions)
   * ============================================ */
  
  /* 缓动函数 - Ant Design 标准 */
  --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
  --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --ease-in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  /* 过渡时间 */
  --transition-duration-fast: 0.15s;   /* 快速过渡 */
  --transition-duration-base: 0.3s;    /* 基础过渡 */
  --transition-duration-slow: 0.5s;    /* 慢速过渡 */
  
  /* 过渡预设 */
  --transition-base: all var(--transition-duration-base) var(--ease-in-out);
  --transition-fast: all var(--transition-duration-fast) var(--ease-in-out);
  --transition-slow: all var(--transition-duration-slow) var(--ease-in-out);
  --transition-color: color var(--transition-duration-base) var(--ease-in-out);
  --transition-background: background-color var(--transition-duration-base) var(--ease-in-out);
  --transition-transform: transform var(--transition-duration-base) var(--ease-in-out);
  --transition-opacity: opacity var(--transition-duration-base) var(--ease-in-out);
  
  /* ============================================
   * Z-Index 层级 (Z-Index Layers)
   * ============================================ */
  
  /* 基于 10 的倍数，便于管理 */
  --z-index-base: 0;
  --z-index-dropdown: 1000;          /* 下拉菜单 */
  --z-index-sticky: 1020;            /* 粘性定位 */
  --z-index-fixed: 1030;              /* 固定定位 */
  --z-index-modal-backdrop: 1040;     /* 模态框背景 */
  --z-index-modal: 1050;              /* 模态框 */
  --z-index-popover: 1060;            /* 弹出框 */
  --z-index-tooltip: 1070;            /* 工具提示 */
  --z-index-notification: 1080;       /* 通知 */
  
  /* ============================================
   * 其他设计元素 (Other Design Elements)
   * ============================================ */
  
  /* 透明度 */
  --opacity-disabled: 0.4;            /* 禁用透明度 */
  --opacity-loading: 0.6;             /* 加载中透明度 */
  --opacity-hover: 0.8;               /* 悬停透明度 */
  
  /* 边框宽度 */
  --border-width-base: 1px;
  --border-width-thick: 2px;
  --border-width-thin: 0.5px;
  
  /* 分割线 */
  --divider-color: var(--color-border-light);
  --divider-width: var(--border-width-base);
  
  /* 滚动条 */
  --scrollbar-width: 8px;
  --scrollbar-thumb-color: rgba(0, 0, 0, 0.2);
  --scrollbar-thumb-hover-color: rgba(0, 0, 0, 0.3);
  --scrollbar-track-color: transparent;
  
  /* 模糊效果 */
  --blur-sm: 4px;
  --blur-base: 8px;
  --blur-lg: 16px;
  
  /* 渐变 */
  --gradient-primary: linear-gradient(135deg, #0067FF 0%, #0052CC 100%);
  --gradient-success: linear-gradient(135deg, #52C41A 0%, #389E0D 100%);
  --gradient-warning: linear-gradient(135deg, #FAAD14 0%, #D46B08 100%);
  --gradient-error: linear-gradient(135deg, #FF4D4F 0%, #CF1322 100%);
}

/* ============================================
 * 暗色模式支持 (Dark Mode Support)
 * ============================================ */
@media (prefers-color-scheme: dark) {
  :root {
    /* 文本颜色 */
    --color-text-title: rgba(255, 255, 255, 0.85);
    --color-text-primary: rgba(255, 255, 255, 0.85);
    --color-text-secondary: rgba(255, 255, 255, 0.65);
    --color-text-tertiary: rgba(255, 255, 255, 0.45);
    --color-text-disabled: rgba(255, 255, 255, 0.25);
    
    /* 背景颜色 */
    --color-bg-base: #141414;
    --color-bg-body: #000000;
    --color-bg-container: #1F1F1F;
    --color-bg-hover: rgba(255, 255, 255, 0.08);
    --color-bg-active: rgba(255, 255, 255, 0.12);
    
    /* 边框颜色 */
    --color-border-base: rgba(255, 255, 255, 0.2);
    --color-border-light: rgba(255, 255, 255, 0.15);
    --color-border-lighter: rgba(255, 255, 255, 0.1);
    
    /* 阴影调整 */
    --shadow-base: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
  }
}