/* ================================
   K8设计系统 - CSS变量定义
   ================================ */

:root {
  /* 主色调系统 */
  --k8-primary: #1B5CE6;           /* 主品牌蓝 */
  --k8-primary-gradient: #4A90E2;  /* 渐变蓝 */
  --k8-primary-light: #87CEEB;     /* 浅蓝色 */
  
  /* 功能色系 */
  --k8-success: #52c41a;           /* 成功绿 */
  --k8-warning: #faad14;           /* 警告橙 */
  --k8-danger: #f5222d;            /* 错误红 */
  --k8-info: #17a2b8;              /* 信息蓝 */
  
  /* 中性色系 */
  --k8-white: #FFFFFF;             /* 纯白色 */
  --k8-light: #F8F9FA;             /* 浅灰色 */
  --k8-lighter: #f0f2f5;           /* 更浅灰 */
  --k8-dark: #333333;              /* 深灰色 */
  --k8-darker: #000000;            /* 纯黑色 */
  --k8-muted: #6c757d;             /* 静默色 */
  
  /* 边框色系 */
  --k8-border: #dee2e6;            /* 主边框 */
  --k8-border-light: #e9ecef;      /* 浅边框 */
  
  /* 背景色系 */
  --k8-bg-primary: var(--k8-primary);
  --k8-bg-secondary: var(--k8-light);
  --k8-bg-light: var(--k8-white);
  --k8-bg-dark: var(--k8-dark);
  
  /* 文本色系 */
  --k8-text-primary: var(--k8-dark);
  --k8-text-secondary: var(--k8-muted);
  --k8-text-light: var(--k8-white);
  --k8-text-muted: #999999;
  
  /* 页脚专用色系 */
  --k8-footer-bg: #12181f;             /* 页脚背景 */
  --k8-footer-text: #a0a9b8;           /* 页脚文字 */
  
  /* 渐变色系 */
  --k8-gradient-primary: linear-gradient(135deg, var(--k8-primary) 0%, var(--k8-primary-gradient) 100%);
  --k8-gradient-light: linear-gradient(135deg, var(--k8-primary-light) 0%, var(--k8-white) 100%);
  --k8-gradient-bg: linear-gradient(135deg, var(--k8-light) 0%, var(--k8-white) 100%);
  
  /* 阴影系统 */
  --k8-shadow-sm: 0 1px 2px rgba(27, 92, 230, 0.05);
  --k8-shadow: 0 2px 8px rgba(27, 92, 230, 0.1);
  --k8-shadow-lg: 0 4px 16px rgba(27, 92, 230, 0.15);
  --k8-shadow-xl: 0 8px 32px rgba(27, 92, 230, 0.2);
  
  /* 圆角系统 */
  --k8-radius-sm: 4px;
  --k8-radius: 6px;
  --k8-radius-lg: 8px;
  --k8-radius-xl: 12px;
  
  /* 字体系统 */
  --k8-font-family: 'pingfang SC','hiragino sans gb','microsoft yahei ui','microsoft yahei',simsun,Roboto,'helvetica neue',arial,sans-serif;
  --k8-font-size: 14px;
  --k8-line-height: 1.5;
  
  /* 间距系统 - 基于8px */
  --k8-space-1: 4px;
  --k8-space-2: 8px;
  --k8-space-3: 16px;
  --k8-space-4: 24px;
  --k8-space-5: 32px;
  --k8-space-6: 48px;
  --k8-space-7: 64px;
  --k8-space-8: 96px;
  
  /* 响应式断点 */
  --k8-breakpoint-xs: 0px;         /* 超小设备 */
  --k8-breakpoint-sm: 576px;       /* 小设备 手机 */
  --k8-breakpoint-md: 768px;       /* 中等设备 平板 */
  --k8-breakpoint-lg: 992px;       /* 大设备 桌面 */
  --k8-breakpoint-xl: 1200px;      /* 超大设备 宽屏桌面 */
  --k8-breakpoint-xxl: 1400px;     /* 超宽屏桌面 */
  
  /* 常用设备断点 */
  --k8-mobile-portrait: 480px;     /* 手机竖屏 */
  --k8-mobile-landscape: 640px;    /* 手机横屏 */
  --k8-tablet-portrait: 768px;     /* 平板竖屏 */
  --k8-tablet-landscape: 1024px;   /* 平板横屏 */
  --k8-laptop: 1366px;             /* 笔记本 */
  --k8-desktop: 1920px;            /* 台式机 */
  
  /* 内容宽度断点 */
  --k8-content-narrow: 640px;      /* 窄内容 */
  --k8-content-medium: 768px;      /* 中等内容 */
  --k8-content-wide: 1024px;       /* 宽内容 */
  
  /* 容器最大宽度 */
  --k8-container-xs: 100%;         /* 超小设备容器 */
  --k8-container-sm: 540px;        /* 小设备容器 */
  --k8-container-md: 720px;        /* 中等设备容器 */
  --k8-container-lg: 960px;        /* 大设备容器 */
  --k8-container-xl: 1140px;       /* 超大设备容器 */
  --k8-container-xxl: 1320px;      /* 超宽设备容器 */
  
  /* 兼容性容器宽度 */
  --k8-container-mobile: 100%;
  --k8-container-tablet: 720px;
  --k8-container-desktop: 960px;
  --k8-container-wide: 1200px;
  
  /* 响应式字体大小 */
  --k8-font-xs: 12px;              /* 超小字体 */
  --k8-font-sm: 14px;              /* 小字体 */
  --k8-font-md: 16px;              /* 中等字体 */
  --k8-font-lg: 18px;              /* 大字体 */
  --k8-font-xl: 20px;              /* 超大字体 */
  --k8-font-xxl: 24px;             /* 超超大字体 */
  
  /* 响应式网格列数 */
  --k8-grid-columns-xs: 1;         /* 超小屏网格列 */
  --k8-grid-columns-sm: 2;         /* 小屏网格列 */
  --k8-grid-columns-md: 3;         /* 中屏网格列 */
  --k8-grid-columns-lg: 4;         /* 大屏网格列 */
  --k8-grid-columns-xl: 6;         /* 超大屏网格列 */
  
  /* 响应式间距 */
  --k8-space-responsive-xs: var(--k8-space-1);
  --k8-space-responsive-sm: var(--k8-space-2);
  --k8-space-responsive-md: var(--k8-space-3);
  --k8-space-responsive-lg: var(--k8-space-4);
  --k8-space-responsive-xl: var(--k8-space-5);
  
  /* Z-index层级 */
  --k8-z-dropdown: 1000;
  --k8-z-sticky: 1020;
  --k8-z-fixed: 1030;
  --k8-z-modal-backdrop: 1040;
  --k8-z-modal: 1050;
  --k8-z-popover: 1060;
  --k8-z-tooltip: 1070;
  
  /* 过渡动画 */
  --k8-transition-fast: 0.15s ease-in-out;
  --k8-transition: 0.3s ease-in-out;
  --k8-transition-slow: 0.5s ease-in-out;
  
  /* 表单元素高度 */
  --k8-input-height: 40px;
  --k8-input-height-sm: 32px;
  --k8-input-height-lg: 48px;
  
  /* 按钮最小尺寸 */
  --k8-button-min-width: 80px;
  --k8-button-height: 40px;
  --k8-button-height-sm: 32px;
  --k8-button-height-lg: 48px;
}