/* CSS 变量系统 */
:root {
  /* ========== 品牌色彩系统 ========== */
  
  /* 主品牌色 - 现代紫蓝色系 */
  --color-brand-50: 245 243 255;
  --color-brand-100: 237 233 254;
  --color-brand-200: 221 214 254;
  --color-brand-300: 196 181 253;
  --color-brand-400: 167 139 250;
  --color-brand-500: 139 92 246;
  --color-brand-600: 124 58 237;
  --color-brand-700: 109 40 217;
  --color-brand-800: 91 33 182;
  --color-brand-900: 76 29 149;
  --color-brand-950: 49 20 96;

  /* 辅助品牌色 - 青色系 */
  --color-cyan-50: 236 254 255;
  --color-cyan-100: 207 250 254;
  --color-cyan-200: 165 243 252;
  --color-cyan-300: 103 232 249;
  --color-cyan-400: 34 211 238;
  --color-cyan-500: 6 182 212;
  --color-cyan-600: 8 145 178;
  --color-cyan-700: 14 116 144;
  --color-cyan-800: 21 94 117;
  --color-cyan-900: 22 78 99;
  --color-cyan-950: 8 51 68;

  /* 点缀色 - 粉色系 */
  --color-pink-50: 253 244 255;
  --color-pink-100: 252 231 243;
  --color-pink-200: 251 207 232;
  --color-pink-300: 249 168 212;
  --color-pink-400: 244 114 182;
  --color-pink-500: 236 72 153;
  --color-pink-600: 219 39 119;
  --color-pink-700: 190 24 93;
  --color-pink-800: 157 23 77;
  --color-pink-900: 131 24 67;
  --color-pink-950: 80 7 36;

  /* 渐变色组合 */
  --gradient-primary: linear-gradient(135deg, rgb(var(--color-brand-500)) 0%, rgb(var(--color-cyan-500)) 100%);
  --gradient-secondary: linear-gradient(135deg, rgb(var(--color-brand-600)) 0%, rgb(var(--color-pink-500)) 100%);
  --gradient-accent: linear-gradient(135deg, rgb(var(--color-cyan-400)) 0%, rgb(var(--color-pink-400)) 100%);
  --gradient-surface: linear-gradient(135deg, rgb(var(--color-brand-50)) 0%, rgb(var(--color-cyan-50)) 100%);

  /* 中性色彩 */
  --color-gray-50: 249 250 251;
  --color-gray-100: 243 244 246;
  --color-gray-200: 229 231 235;
  --color-gray-300: 209 213 219;
  --color-gray-400: 156 163 175;
  --color-gray-500: 107 114 128;
  --color-gray-600: 75 85 99;
  --color-gray-700: 55 65 81;
  --color-gray-800: 31 41 55;
  --color-gray-900: 17 24 39;
  --color-gray-950: 3 7 18;

  /* 语义化色彩 */
  --color-success-50: 240 253 244;
  --color-success-100: 220 252 231;
  --color-success-500: 34 197 94;
  --color-success-600: 22 163 74;
  --color-success-700: 21 128 61;

  --color-warning-50: 254 252 232;
  --color-warning-100: 254 249 195;
  --color-warning-500: 234 179 8;
  --color-warning-600: 202 138 4;
  --color-warning-700: 161 98 7;

  --color-error-50: 254 242 242;
  --color-error-100: 254 226 226;
  --color-error-500: 239 68 68;
  --color-error-600: 220 38 38;
  --color-error-700: 185 28 28;

  --color-info-50: 239 246 255;
  --color-info-100: 219 234 254;
  --color-info-500: 59 130 246;
  --color-info-600: 37 99 235;
  --color-info-700: 29 78 216;

  /* ========== 应用色彩变量 ========== */

  /* 主色调 - 使用新的品牌色 */
  --color-primary: var(--color-brand-500);
  --color-primary-hover: var(--color-brand-600);
  --color-primary-active: var(--color-brand-700);
  --color-primary-light: var(--color-brand-100);
  --color-primary-dark: var(--color-brand-800);

  /* 辅助色调 */
  --color-secondary: var(--color-cyan-500);
  --color-secondary-hover: var(--color-cyan-600);
  --color-accent: var(--color-pink-500);
  --color-accent-hover: var(--color-pink-600);

  /* 文本色彩 - 增强对比度 */
  --color-text-primary: var(--color-gray-900);
  --color-text-secondary: var(--color-gray-700);
  --color-text-tertiary: var(--color-gray-600);
  --color-text-disabled: var(--color-gray-400);
  --color-text-inverse: var(--color-gray-50);
  --color-text-accent: var(--color-brand-600);

  /* 背景色彩 - 更现代的层次感 */
  --color-background-primary: var(--color-gray-50);
  --color-background-secondary: var(--color-gray-100);
  --color-background-tertiary: var(--color-gray-200);
  --color-background-inverse: var(--color-gray-900);
  --color-background-overlay: rgba(0, 0, 0, 0.5);
  --color-background-card: rgba(255, 255, 255, 0.8);
  --color-background-glass: rgba(255, 255, 255, 0.6);

  /* 边框色彩 - 更精细的层次 */
  --color-border-primary: var(--color-gray-200);
  --color-border-secondary: var(--color-gray-300);
  --color-border-hover: var(--color-gray-400);
  --color-border-focus: var(--color-brand-500);
  --color-border-accent: var(--color-cyan-400);

  /* 状态色彩 - 优化亮度 */
  --color-success: var(--color-success-500);
  --color-success-light: var(--color-success-100);
  --color-warning: var(--color-warning-500);
  --color-warning-light: var(--color-warning-100);
  --color-error: var(--color-error-500);
  --color-error-light: var(--color-error-100);
  --color-info: var(--color-info-500);
  --color-info-light: var(--color-info-100);

  /* 特殊效果色彩 */
  --color-glow: var(--color-brand-400);
  --color-shadow: rgba(139, 92, 246, 0.1);
  --color-highlight: rgba(6, 182, 212, 0.1);

  /* ========== 间距系统 ========== */
  --spacing-0: 0;
  --spacing-px: 1px;
  --spacing-0-5: 0.125rem; /* 2px */
  --spacing-1: 0.25rem; /* 4px */
  --spacing-1-5: 0.375rem; /* 6px */
  --spacing-2: 0.5rem; /* 8px */
  --spacing-2-5: 0.625rem; /* 10px */
  --spacing-3: 0.75rem; /* 12px */
  --spacing-3-5: 0.875rem; /* 14px */
  --spacing-4: 1rem; /* 16px */
  --spacing-5: 1.25rem; /* 20px */
  --spacing-6: 1.5rem; /* 24px */
  --spacing-7: 1.75rem; /* 28px */
  --spacing-8: 2rem; /* 32px */
  --spacing-9: 2.25rem; /* 36px */
  --spacing-10: 2.5rem; /* 40px */
  --spacing-12: 3rem; /* 48px */
  --spacing-14: 3.5rem; /* 56px */
  --spacing-16: 4rem; /* 64px */
  --spacing-20: 5rem; /* 80px */
  --spacing-24: 6rem; /* 96px */

  /* 语义化间距 */
  --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-2xl: var(--spacing-12);
  --spacing-3xl: var(--spacing-16);

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

  /* 字体族 */
  --font-sans:
    'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    'Noto Sans', sans-serif;
  --font-mono:
    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

  /* 字体大小 */
  --font-size-xs: 0.75rem; /* 12px */
  --font-size-sm: 0.875rem; /* 14px */
  --font-size-base: 1rem; /* 16px */
  --font-size-lg: 1.125rem; /* 18px */
  --font-size-xl: 1.25rem; /* 20px */
  --font-size-2xl: 1.5rem; /* 24px */
  --font-size-3xl: 1.875rem; /* 30px */
  --font-size-4xl: 2.25rem; /* 36px */
  --font-size-5xl: 3rem; /* 48px */
  --font-size-6xl: 3.75rem; /* 60px */

  /* 字体粗细 */
  --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;

  /* 行高 */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  --line-height-loose: 2;

  /* ========== 尺寸系统 ========== */

  /* 圆角 */
  --radius-none: 0;
  --radius-sm: 0.25rem; /* 4px */
  --radius-base: 0.375rem; /* 6px */
  --radius-md: 0.5rem; /* 8px */
  --radius-lg: 0.75rem; /* 12px */
  --radius-xl: 1rem; /* 16px */
  --radius-2xl: 1.5rem; /* 24px */
  --radius-full: 9999px;

  /* 阴影 */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-base: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-md: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);

  /* 边框宽度 */
  --border-width-0: 0px;
  --border-width-1: 1px;
  --border-width-2: 2px;
  --border-width-4: 4px;
  --border-width-8: 8px;

  /* ========== 动画系统 ========== */

  /* 过渡时间 */
  --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);

  /* 语义化过渡 */
  --transition-fast: var(--duration-150) var(--ease-out);
  --transition-normal: var(--duration-200) var(--ease-in-out);
  --transition-slow: var(--duration-300) var(--ease-in-out);
  --transition-colors:
    color var(--duration-150) var(--ease-in-out), background-color var(--duration-150) var(--ease-in-out),
    border-color var(--duration-150) var(--ease-in-out);
  --transition-transform: transform var(--duration-150) var(--ease-in-out);
  --transition-opacity: opacity var(--duration-150) var(--ease-in-out);

  /* ========== Z-Index 层级 ========== */
  --z-hide: -1;
  --z-auto: auto;
  --z-base: 0;
  --z-docked: 10;
  --z-dropdown: 1000;
  --z-sticky: 1100;
  --z-banner: 1200;
  --z-overlay: 1300;
  --z-modal: 1400;
  --z-popover: 1500;
  --z-skip-link: 1600;
  --z-toast: 1700;
  --z-tooltip: 1800;
}

/* ========== 暗色主题变量 ========== */
[data-theme='dark'],
.dark {
  /* 品牌色彩调整 */
  --color-primary: var(--color-brand-400);
  --color-primary-hover: var(--color-brand-300);
  --color-primary-active: var(--color-brand-200);
  --color-primary-light: var(--color-brand-900);
  --color-primary-dark: var(--color-brand-100);

  /* 辅助色调调整 */
  --color-secondary: var(--color-cyan-400);
  --color-secondary-hover: var(--color-cyan-300);
  --color-accent: var(--color-pink-400);
  --color-accent-hover: var(--color-pink-300);

  /* 文本色彩 - 更高的对比度 */
  --color-text-primary: #f1f5f9;
  --color-text-secondary: #e2e8f0;
  --color-text-tertiary: #cbd5e1;
  --color-text-disabled: #94a3b8;
  --color-text-inverse: var(--color-gray-900);
  --color-text-accent: var(--color-brand-300);

  /* 背景色彩 - 深色层次 */
  --color-background-primary: #0f172a;
  --color-background-secondary: #1e293b;
  --color-background-tertiary: #334155;
  --color-background-inverse: var(--color-gray-50);
  --color-background-overlay: rgba(0, 0, 0, 0.7);
  --color-background-card: rgba(30, 41, 59, 0.8);
  --color-background-glass: rgba(15, 23, 42, 0.6);

  /* 边框色彩 - 精细的层次 */
  --color-border-primary: rgba(148, 163, 184, 0.1);
  --color-border-secondary: rgba(148, 163, 184, 0.2);
  --color-border-hover: rgba(148, 163, 184, 0.3);
  --color-border-focus: var(--color-brand-400);
  --color-border-accent: var(--color-cyan-400);

  /* 状态色彩调整 */
  --color-success: var(--color-success-400);
  --color-success-light: var(--color-success-900);
  --color-warning: var(--color-warning-400);
  --color-warning-light: var(--color-warning-900);
  --color-error: var(--color-error-400);
  --color-error-light: var(--color-error-900);
  --color-info: var(--color-info-400);
  --color-info-light: var(--color-info-900);

  /* 特殊效果色彩 */
  --color-glow: var(--color-brand-400);
  --color-shadow: rgba(139, 92, 246, 0.2);
  --color-highlight: rgba(6, 182, 212, 0.1);

  /* 渐变色调整 */
  --gradient-primary: linear-gradient(135deg, rgb(var(--color-brand-400)) 0%, rgb(var(--color-cyan-400)) 100%);
  --gradient-secondary: linear-gradient(135deg, rgb(var(--color-brand-400)) 0%, rgb(var(--color-pink-400)) 100%);
  --gradient-accent: linear-gradient(135deg, rgb(var(--color-cyan-400)) 0%, rgb(var(--color-pink-400)) 100%);
  --gradient-surface: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
}

/* ========== 媒体查询变量 ========== */
/* 这些将在 CSS 中作为 @custom-media 使用（未来特性） */
/* 当前可以在 JavaScript 中使用 */
:root {
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
}
