/**
 * 天机阁设计系统 - CSS 变量定义
 * 基于 design-system.md 规范
 * 版本: 1.0
 */

:root {
  /* ==================== 配色系统 ==================== */

  /* 主色 - 金色系 */
  --color-primary: #c9a96e;
  --color-primary-light: #d4b87a;
  --color-primary-dark: #a88a4f;
  --color-primary-rgb: 201, 169, 110;

  /* 辅助色 - 紫色系 */
  --color-secondary: #a29bfe;
  --color-secondary-light: #b8b2ff;
  --color-secondary-dark: #7c73e6;

  /* 背景色 */
  --color-bg-primary: #0a0a1a;
  --color-bg-secondary: #1a1a2e;
  --color-bg-card: rgba(26, 26, 46, 0.8);
  --color-bg-glass: rgba(201, 169, 110, 0.08);

  /* 文字色 */
  --color-text-primary: #e0e0e0;
  --color-text-secondary: #b0b0b0;
  --color-text-muted: #666666;
  --color-text-gold: #c9a96e;

  /* 边框色 */
  --color-border: rgba(201, 169, 110, 0.2);
  --color-border-light: rgba(201, 169, 110, 0.1);
  --color-border-focus: #c9a96e;

  /* 功能色 */
  --color-success: #52c41a;
  --color-warning: #faad14;
  --color-error: #ff4d4f;
  --color-info: #1890ff;

  /* 五行配色 */
  --color-wuxing-gold: #daa520;
  --color-wuxing-wood: #228b22;
  --color-wuxing-water: #1e90ff;
  --color-wuxing-fire: #dc143c;
  --color-wuxing-earth: #8b4513;

  /* ==================== 字体系统 ==================== */

  /* 字体族 */
  --font-title: 'Noto Serif SC', 'STKaiti', 'KaiTi', serif;
  --font-body: 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

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

  /* 字重 */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* 行高 */
  --line-height-tight: 1.3;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;
  --line-height-loose: 1.8;

  /* ==================== 间距系统 ==================== */

  /* 基于 8px 基础单位 */
  --spacing-0: 0;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-12: 48px;
  --spacing-16: 64px;

  /* ==================== 圆角系统 ==================== */

  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* ==================== 阴影系统 ==================== */

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.2);
  --shadow-gold: 0 4px 20px rgba(201, 169, 110, 0.15);
  --shadow-gold-lg: 0 8px 40px rgba(201, 169, 110, 0.25);

  /* ==================== 过渡系统 ==================== */

  --transition-fast: 150ms ease;
  --transition-normal: 200ms ease;
  --transition-slow: 300ms ease;
  --transition-slower: 500ms ease;

  /* 过渡属性组合 */
  --transition-colors: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
  --transition-transform: transform 200ms ease;
  --transition-opacity: opacity 200ms ease;
  --transition-shadow: box-shadow 200ms ease;

  /* ==================== 层级系统 ==================== */

  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
  --z-toast: 800;

  /* ==================== 布局系统 ==================== */

  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1200px;
  --container-2xl: 1440px;

  /* 导航高度 */
  --navbar-height: 60px;
  --navbar-height-mobile: 56px;

  /* 触摸目标最小尺寸 */
  --touch-target-min: 44px;
}

/* ==================== 暗色主题（默认） ==================== */

[data-theme="dark"],
:root {
  color-scheme: dark;
}

/* ==================== 减少动画偏好 ==================== */

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-normal: 0ms;
    --transition-slow: 0ms;
    --transition-slower: 0ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==================== 打印样式 ==================== */

@media print {
  :root {
    --color-bg-primary: #ffffff;
    --color-text-primary: #000000;
  }
}