/* ==============================================
   设计变量系统 - 差异化版本
   使用不同的颜色方案和间距系统
   ============================================== */

:root {
  /* ========== 品牌色彩 (差异化调整) ========== */
  --primary-brand: #7c3aed;        /* 紫色主题(不同于参考的靛蓝) */
  --accent-success: #059669;       /* 深绿色 */
  --accent-alert: #ea580c;         /* 深橙色 */
  --accent-danger: #dc2626;        /* 深红色 */
  --accent-info: #0284c7;          /* 深蓝色 */
  
  /* ========== 背景与表面 ========== */
  --surface-base: #09090b;         /* 更深的背景 */
  --surface-raised: #18181b;       /* 卡片背景 */
  --surface-overlay: #27272a;      /* 叠加层 */
  --text-muted: #71717a;           /* 次要文本 */
  --divider-line: rgba(255,255,255,.06);  /* 分隔线 */
  
  /* ========== 字体系统 ========== */
  --font-family-base: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,PingFang SC,Hiragino Sans GB,Microsoft YaHei;
  --font-family-mono: ui-monospace,SF Mono,Consolas,Liberation Mono,monospace;
  
  /* 字体大小 (使用不同的比例) */
  --text-h1: 24px;
  --text-h2: 19px;
  --text-base: 15px;
  --text-sm: 13px;
  --text-xs: 11px;
  --text-digit: 22px;
  
  /* 字重 */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  
  /* ========== 间距系统 (Fibonacci序列) ========== */
  --space-1: 5px;
  --space-2: 8px;
  --space-3: 13px;
  --space-4: 21px;
  --space-5: 34px;
  
  /* ========== 圆角系统 ========== */
  --rounded-sm: 8px;
  --rounded-md: 12px;
  --rounded-lg: 16px;
  --rounded-full: 9999px;
  
  /* ========== 阴影系统 ========== */
  --shadow-sm: 0 2px 8px rgba(0,0,0,.15);
  --shadow-md: 0 4px 16px rgba(0,0,0,.2);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.3);
  
  /* ========== 动画系统 ========== */
  --transition-fast: 140ms;
  --transition-base: 200ms;
  --transition-slow: 300ms;
  --easing-smooth: cubic-bezier(.25,.1,.25,1);
  --easing-bounce: cubic-bezier(.68,-.55,.265,1.55);
  
  /* ========== Z-index 层级 ========== */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-toast: 600;
}

/* ========== 暗色模式优化 ========== */
@media (prefers-color-scheme: dark) {
  :root {
    --surface-base: #09090b;
    --surface-raised: #18181b;
    color-scheme: dark;
  }
}

/* ========== 减少动画 ========== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
    --transition-slow: 0ms;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ========== 全局重置 ========== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font-family-base);
  font-size: var(--text-base);
  line-height: 1.6;
  color: #f4f4f5;
  background: var(--surface-base);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ========== 辅助类 ========== */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.digit-mono {
  font-family: var(--font-family-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
}