/**
 * Design Tokens - 设计令牌系统
 * 支持明暗主题切换的 CSS 变量定义
 * @author 前端架构师
 */

/* ===== 明亮主题（默认） ===== */
:root {
  /* 主色系 - 科技蓝 */
  --color-primary: #0EA5E9;
  --color-primary-light: #38BDF8;
  --color-primary-dark: #0284C7;
  --color-primary-50: #F0F9FF;
  --color-primary-100: #E0F2FE;
  --color-primary-200: #BAE6FD;
  --color-primary-300: #7DD3FC;
  --color-primary-400: #38BDF8;
  --color-primary-500: #0EA5E9;
  --color-primary-600: #0284C7;
  --color-primary-700: #0369A1;
  --color-primary-800: #075985;
  --color-primary-900: #0C4A6E;
  --color-primary-950: #082F49;

  /* 语义化颜色 */
  --color-success: #22C55E;
  --color-success-light: #4ADE80;
  --color-success-dark: #16A34A;
  --color-success-50: #F0FDF4;
  --color-success-100: #DCFCE7;
  --color-success-600: #16A34A;

  --color-warning: #F59E0B;
  --color-warning-light: #FBBF24;
  --color-warning-dark: #D97706;
  --color-warning-50: #FFFBEB;
  --color-warning-100: #FEF3C7;
  --color-warning-600: #D97706;

  --color-danger: #EF4444;
  --color-danger-light: #F87171;
  --color-danger-dark: #DC2626;
  --color-danger-50: #FEF2F2;
  --color-danger-100: #FEE2E2;
  --color-danger-600: #DC2626;

  --color-info: #6B7280;
  --color-info-light: #9CA3AF;
  --color-info-dark: #4B5563;

  /* 中性色系 */
  --color-gray-50: #F8FAFC;
  --color-gray-100: #F1F5F9;
  --color-gray-200: #E2E8F0;
  --color-gray-300: #CBD5E1;
  --color-gray-400: #94A3B8;
  --color-gray-500: #64748B;
  --color-gray-600: #475569;
  --color-gray-700: #334155;
  --color-gray-800: #1E293B;
  --color-gray-900: #0F172A;
  --color-gray-950: #020617;

  /* 背景色 */
  --color-bg-primary: #FFFFFF;
  --color-bg-secondary: #F8FAFC;
  --color-bg-tertiary: #F1F5F9;
  --color-bg-card: #FFFFFF;
  --color-bg-overlay: rgba(15, 23, 42, 0.8);
  --color-bg-mask: rgba(0, 0, 0, 0.45);

  /* 文本色 */
  --color-text-primary: #0F172A;
  --color-text-secondary: #475569;
  --color-text-tertiary: #64748B;
  --color-text-quaternary: #94A3B8;
  --color-text-placeholder: #CBD5E1;
  --color-text-disabled: #E2E8F0;
  --color-text-inverse: #FFFFFF;

  /* 边框色 */
  --color-border-primary: rgba(2, 6, 23, 0.08);
  --color-border-secondary: rgba(2, 6, 23, 0.06);
  --color-border-tertiary: rgba(2, 6, 23, 0.04);
  --color-border-focus: var(--color-primary);
  --color-border-error: var(--color-danger);

  /* 分割线 */
  --color-divider: rgba(2, 6, 23, 0.06);
  --color-divider-light: rgba(2, 6, 23, 0.04);

  /* 圆角系统 */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-base: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-3xl: 24px;
  --radius-full: 9999px;

  /* 阴影系统 */
  --shadow-xs: 0 1px 2px rgba(2, 6, 23, 0.05);
  --shadow-sm: 0 1px 3px rgba(2, 6, 23, 0.1), 0 1px 2px rgba(2, 6, 23, 0.06);
  --shadow-base: 0 1px 3px rgba(2, 6, 23, 0.1), 0 1px 2px rgba(2, 6, 23, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(2, 6, 23, 0.1), 0 2px 4px -1px rgba(2, 6, 23, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(2, 6, 23, 0.1), 0 4px 6px -2px rgba(2, 6, 23, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(2, 6, 23, 0.1), 0 10px 10px -5px rgba(2, 6, 23, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(2, 6, 23, 0.25);
  --shadow-card: 0 8px 24px rgba(2, 6, 23, 0.06);
  --shadow-card-hover: 0 12px 32px rgba(2, 6, 23, 0.12);
  --shadow-inner: inset 0 2px 4px rgba(2, 6, 23, 0.06);
  --shadow-none: none;

  /* 间距系统 */
  --spacing-0: 0;
  --spacing-px: 1px;
  --spacing-0_5: 2px;
  --spacing-1: 4px;
  --spacing-1_5: 6px;
  --spacing-2: 8px;
  --spacing-2_5: 10px;
  --spacing-3: 12px;
  --spacing-3_5: 14px;
  --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;
  --spacing-28: 112px;
  --spacing-32: 128px;

  /* 字体系统 */
  --font-family-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;

  /* 字号系统 */
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-base: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 20px;
  --font-size-3xl: 24px;
  --font-size-4xl: 28px;
  --font-size-5xl: 32px;

  /* 行高系统 */
  --line-height-none: 1;
  --line-height-tight: 1.25;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 2;

  /* 字重系统 */
  --font-weight-thin: 100;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  /* 层级系统 */
  --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-toast: 2000;

  /* 动画系统 */
  --duration-75: 75ms;
  --duration-100: 100ms;
  --duration-150: 150ms;
  --duration-200: 200ms;
  --duration-300: 300ms;
  --duration-500: 500ms;
  --duration-700: 700ms;
  --duration-1000: 1000ms;

  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* 断点系统 */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;

  /* 容器宽度 */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;
}

/* ===== 暗色主题覆盖 ===== */
html.dark {
  /* 背景色 - 暗色主题 */
  --color-bg-primary: #111827;
  --color-bg-secondary: #1F2937;
  --color-bg-tertiary: #374151;
  --color-bg-card: #1F2937;
  --color-bg-overlay: rgba(17, 24, 39, 0.8);
  --color-bg-mask: rgba(0, 0, 0, 0.6);

  /* 文本色 - 暗色主题 */
  --color-text-primary: #F9FAFB;
  --color-text-secondary: #E5E7EB;
  --color-text-tertiary: #D1D5DB;
  --color-text-quaternary: #9CA3AF;
  --color-text-placeholder: #6B7280;
  --color-text-disabled: #4B5563;
  --color-text-inverse: #111827;

  /* 边框色 - 暗色主题 */
  --color-border-primary: #374151;
  --color-border-secondary: #4B5563;
  --color-border-tertiary: #6B7280;

  /* 分割线 - 暗色主题 */
  --color-divider: #374151;
  --color-divider-light: #4B5563;

  /* 阴影系统 - 暗色主题 */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-base: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.25);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.3);
  --shadow-card-hover: 0 12px 32px rgba(0, 0, 0, 0.4);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.3);

  /* 主色系在暗色主题下的调整 */
  --color-primary: #38BDF8;
  --color-primary-light: #7DD3FC;
  --color-primary-dark: #0EA5E9;

  /* 语义化颜色在暗色主题下的调整 */
  --color-success: #4ADE80;
  --color-success-light: #6EE7B7;
  --color-success-dark: #22C55E;

  --color-warning: #FBBF24;
  --color-warning-light: #FCD34D;
  --color-warning-dark: #F59E0B;

  --color-danger: #F87171;
  --color-danger-light: #FCA5A5;
  --color-danger-dark: #EF4444;
}

/* ===== 主题切换动画 ===== */
* {
  transition: 
    background-color var(--duration-200) var(--ease-out),
    border-color var(--duration-200) var(--ease-out),
    color var(--duration-200) var(--ease-out),
    box-shadow var(--duration-200) var(--ease-out);
}

/* 禁用某些元素的主题切换动画 */
*:is(
  .el-loading-mask,
  .el-loading-spinner,
  .el-progress-bar__inner,
  .el-slider__runway,
  .el-slider__bar
) {
  transition: none !important;
}

/* ===== 响应式工具类 ===== */
@media (max-width: 640px) {
  :root {
    --spacing-container: var(--spacing-4);
  }
}

@media (min-width: 641px) and (max-width: 768px) {
  :root {
    --spacing-container: var(--spacing-6);
  }
}

@media (min-width: 769px) {
  :root {
    --spacing-container: var(--spacing-8);
  }
}

/* ===== 打印样式优化 ===== */
@media print {
  :root {
    --shadow-card: none;
    --shadow-card-hover: none;
    --color-bg-card: transparent;
    --color-border-primary: #000000;
  }
}

/* ===== 高对比度模式支持 ===== */
@media (prefers-contrast: high) {
  :root {
    --color-border-primary: rgba(0, 0, 0, 0.2);
    --color-border-secondary: rgba(0, 0, 0, 0.15);
  }

  html.dark {
    --color-border-primary: rgba(255, 255, 255, 0.3);
    --color-border-secondary: rgba(255, 255, 255, 0.2);
  }
}

/* ===== 减少动画偏好支持 ===== */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
