/**
 * SP低空履约平台 - 设计令牌系统
 * 基于 Google Material Design 风格
 * 
 * 本文件定义所有 CSS 变量（设计令牌），包括：
 * - 颜色系统（主色、语义色、背景色、文字色、边框色）
 * - 字体系统（字体家族、字号、行高、字重）
 * - 间距系统（4px 基准倍数）
 * - 圆角系统（4px-24px）
 * - 阴影系统（elevation 1-8）
 * - 过渡动画时长
 * 
 * Requirements: 1.1, 1.2, 1.3, 1.4, 1.7, 1.8, 16.1-16.10
 */

:root {
  /* ========================================
   * 颜色系统 - Color System
   * ======================================== */
  
  /* 主色 - Google Blue (Requirements: 1.3) */
  --color-primary: #1A73E8;
  --color-primary-light: #4285F4;
  --color-primary-dark: #1557B0;
  --color-primary-hover: rgba(26, 115, 232, 0.08);
  --color-primary-focus: rgba(26, 115, 232, 0.12);
  
  /* 语义色 - Semantic Colors (Requirements: 1.7) */
  --color-success: #34A853;
  --color-success-light: #81C995;
  --color-success-dark: #1E8E3E;
  
  --color-warning: #FBBC04;
  --color-warning-light: #FDD663;
  --color-warning-dark: #F9AB00;
  
  --color-error: #EA4335;
  --color-error-light: #F28B82;
  --color-error-dark: #C5221F;
  
  --color-info: #4285F4;
  --color-info-light: #8AB4F8;
  --color-info-dark: #1967D2;
  
  /* 禁用色 */
  --color-disabled: #9AA0A6;
  --color-disabled-bg: #F1F3F4;
  
  /* 背景色 - Background Colors (Requirements: 1.2, 16.1) */
  --color-bg-primary: #FFFFFF;
  --color-bg-secondary: #F8F9FA;
  --color-bg-tertiary: #F1F3F4;
  --color-bg-elevated: #FFFFFF;
  
  /* 文字色 - Text Colors (Requirements: 16.6) */
  --color-text-primary: #202124;
  --color-text-secondary: #5F6368;
  --color-text-disabled: #9AA0A6;
  --color-text-hint: #80868B;
  --color-text-inverse: #FFFFFF;
  
  /* 边框色 - Border Colors (Requirements: 16.7) */
  --color-border: #DADCE0;
  --color-border-light: #E8EAED;
  --color-border-focus: #1A73E8;
  --color-border-error: #EA4335;
  
  /* 分隔线色 */
  --color-divider: #DADCE0;
  --color-divider-light: #E8EAED;
  
  /* 悬停和聚焦叠加色 (Requirements: 16.10) */
  --color-hover-overlay: rgba(0, 0, 0, 0.08);
  --color-focus-overlay: rgba(26, 115, 232, 0.12);
  --color-active-overlay: rgba(0, 0, 0, 0.12);
  
  /* 遮罩层色 */
  --color-overlay: rgba(0, 0, 0, 0.5);
  --color-overlay-light: rgba(0, 0, 0, 0.32);

  /* ========================================
   * 字体系统 - Typography System
   * ======================================== */
  
  /* 字体家族 (Requirements: 1.4) */
  --font-family: 'Google Sans', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-family-mono: 'Roboto Mono', 'Consolas', 'Monaco', 'Courier New', monospace;
  
  /* 字体大小 (Requirements: 16.2) */
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 24px;
  --font-size-2xl: 32px;
  --font-size-3xl: 36px;
  --font-size-4xl: 48px;
  
  /* 行高 */
  --line-height-tight: 1.25;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 1.75;
  
  /* 字重 */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* 字间距 */
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-wider: 0.05em;

  /* ========================================
   * 间距系统 - Spacing System
   * 基于 4px 基准倍数 (Requirements: 16.3)
   * ======================================== */
  
  --spacing-0: 0;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-7: 28px;
  --spacing-8: 32px;
  --spacing-9: 36px;
  --spacing-10: 40px;
  --spacing-11: 44px;
  --spacing-12: 48px;
  --spacing-14: 56px;
  --spacing-16: 64px;
  --spacing-20: 80px;
  --spacing-24: 96px;

  /* ========================================
   * 圆角系统 - Border Radius System
   * (Requirements: 16.4)
   * ======================================== */
  
  --radius-none: 0;
  --radius-sm: 4px;      /* 小组件 */
  --radius-md: 8px;      /* 卡片 */
  --radius-lg: 12px;     /* 中等容器 */
  --radius-xl: 16px;     /* 对话框 */
  --radius-2xl: 24px;    /* 大容器 */
  --radius-full: 9999px; /* 圆形 */

  /* ========================================
   * 阴影系统 - Shadow/Elevation System
   * 基于 Material Design 层级规范 (Requirements: 1.8, 16.5)
   * ======================================== */
  
  /* Elevation 1 - 轻微阴影（悬停状态） */
  --shadow-1: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 
              0 1px 3px 1px rgba(60, 64, 67, 0.15);
  
  /* Elevation 2 - 卡片阴影 */
  --shadow-2: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 
              0 2px 6px 2px rgba(60, 64, 67, 0.15);
  
  /* Elevation 3 - 提升卡片 */
  --shadow-3: 0 1px 3px 0 rgba(60, 64, 67, 0.3), 
              0 4px 8px 3px rgba(60, 64, 67, 0.15);
  
  /* Elevation 4 - 浮层/下拉菜单 */
  --shadow-4: 0 2px 4px -1px rgba(60, 64, 67, 0.3), 
              0 4px 5px 0 rgba(60, 64, 67, 0.14), 
              0 1px 10px 0 rgba(60, 64, 67, 0.12);
  
  /* Elevation 6 - 导航抽屉 */
  --shadow-6: 0 3px 5px -1px rgba(60, 64, 67, 0.3), 
              0 6px 10px 0 rgba(60, 64, 67, 0.14), 
              0 1px 18px 0 rgba(60, 64, 67, 0.12);
  
  /* Elevation 8 - 对话框/模态框 */
  --shadow-8: 0 5px 5px -3px rgba(60, 64, 67, 0.3), 
              0 8px 10px 1px rgba(60, 64, 67, 0.14), 
              0 3px 14px 2px rgba(60, 64, 67, 0.12);
  
  /* Elevation 12 - 高层级浮层 */
  --shadow-12: 0 7px 8px -4px rgba(60, 64, 67, 0.3), 
               0 12px 17px 2px rgba(60, 64, 67, 0.14), 
               0 5px 22px 4px rgba(60, 64, 67, 0.12);
  
  /* Elevation 16 - 最高层级 */
  --shadow-16: 0 8px 10px -5px rgba(60, 64, 67, 0.3), 
               0 16px 24px 2px rgba(60, 64, 67, 0.14), 
               0 6px 30px 5px rgba(60, 64, 67, 0.12);
  
  /* 内阴影 */
  --shadow-inset: inset 0 1px 2px 0 rgba(60, 64, 67, 0.1);
  
  /* 无阴影 */
  --shadow-none: none;

  /* ========================================
   * 过渡动画系统 - Transition System
   * ======================================== */
  
  /* 动画时长 */
  --duration-instant: 0ms;
  --duration-fast: 100ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
  --duration-slower: 400ms;
  --duration-slowest: 500ms;
  
  /* 缓动函数 - Material Design 标准 */
  --easing-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --easing-decelerate: cubic-bezier(0.0, 0.0, 0.2, 1);
  --easing-accelerate: cubic-bezier(0.4, 0.0, 1, 1);
  --easing-sharp: cubic-bezier(0.4, 0.0, 0.6, 1);
  
  /* 预设过渡 */
  --transition-fast: all 100ms var(--easing-standard);
  --transition-normal: all 200ms var(--easing-standard);
  --transition-slow: all 300ms var(--easing-standard);
  --transition-color: color 200ms var(--easing-standard), 
                      background-color 200ms var(--easing-standard), 
                      border-color 200ms var(--easing-standard);
  --transition-transform: transform 200ms var(--easing-standard);
  --transition-opacity: opacity 200ms var(--easing-standard);
  --transition-shadow: box-shadow 200ms var(--easing-standard);

  /* ========================================
   * 布局尺寸 - Layout Dimensions
   * ======================================== */
  
  /* 导航栏尺寸 */
  --nav-height: 64px;
  --sidebar-width: 256px;
  --sidebar-width-collapsed: 72px;
  
  /* 按钮高度 (Requirements: 16.8) */
  --btn-height-sm: 32px;
  --btn-height-md: 36px;
  --btn-height-lg: 48px;
  
  /* 输入框高度 (Requirements: 16.9) */
  --input-height: 56px;
  --input-height-sm: 40px;
  
  /* 容器最大宽度 */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;

  /* ========================================
   * 响应式断点 - Breakpoints
   * (Requirements: 1.5)
   * ======================================== */
  
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1440px;
  --breakpoint-3xl: 1920px;

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


/* ========================================
 * 兼容性变量映射 - Legacy Variable Mapping
 * 用于兼容旧页面中使用的变量名
 * ======================================== */

:root {
  /* 旧变量名映射到新变量名 */
  --bg-card: var(--color-bg-primary);
  --bg-card-hover: var(--color-hover-overlay);
  --bg-primary: var(--color-bg-secondary);
  --bg-secondary: var(--color-bg-tertiary);
  
  --border-color: var(--color-border);
  --border-hover: var(--color-border-focus);
  
  --text-primary: var(--color-text-primary);
  --text-secondary: var(--color-text-secondary);
  --text-muted: var(--color-text-disabled);
  
  --primary-color: var(--color-primary);
  --primary-dark: var(--color-primary-dark);
  --primary-light: var(--color-primary-light);
  
  --success-color: var(--color-success);
  --warning-color: var(--color-warning);
  --error-color: var(--color-error);
  --info-color: var(--color-info);
  
  /* 旧间距变量映射 */
  --spacing-xs: var(--spacing-1);
  --spacing-sm: var(--spacing-2);
  --spacing-md: var(--spacing-4);
  --spacing-lg: var(--spacing-6);
  --spacing-xl: var(--spacing-8);
  --spacing-xxl: var(--spacing-12);
  
  /* 旧字体变量映射 */
  --font-mono: var(--font-family-mono);
  
  /* 旧过渡变量映射 */
  --transition-fast: var(--transition-fast);
  --transition-normal: var(--transition-normal);
}