/**
 * Design System - 设计系统基础变量
 * 统一的颜色、字体、间距、阴影等设计规范
 */

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

  /* 主色调 - 蓝色系 */
  --primary-h: 221.2;
  --primary-s: 83.2%;
  --primary-l: 53.3%;
  --primary: hsl(var(--primary-h) var(--primary-s) var(--primary-l));
  --primary-hover: hsl(var(--primary-h) var(--primary-s) 48%);
  --primary-active: hsl(var(--primary-h) var(--primary-s) 43%);
  --primary-light: hsl(var(--primary-h) var(--primary-s) 96%);

  /* 语义色彩 */
  --success: hsl(142 76% 36%);
  --success-light: hsl(142 76% 95%);
  --success-border: hsl(142 76% 45%);

  --warning: hsl(38 92% 50%);
  --warning-light: hsl(38 92% 95%);
  --warning-border: hsl(38 92% 60%);

  --error: hsl(0 84% 60%);
  --error-light: hsl(0 84% 96%);
  --error-border: hsl(0 84% 65%);

  --info: hsl(199 89% 48%);
  --info-light: hsl(199 89% 95%);
  --info-border: hsl(199 89% 58%);

  /* 中性色 - 亮色主题 */
  --background: hsl(0 0% 100%);
  --foreground: hsl(222 47% 11%);

  --card: hsl(0 0% 100%);
  --card-foreground: hsl(222 47% 11%);

  --popover: hsl(0 0% 100%);
  --popover-foreground: hsl(222 47% 11%);

  --muted: hsl(210 40% 96%);
  --muted-foreground: hsl(215 16% 47%);

  --accent: hsl(210 40% 96%);
  --accent-foreground: hsl(222 47% 11%);

  --border: hsl(214 32% 91%);
  --input: hsl(214 32% 91%);
  --ring: hsl(var(--primary-h) var(--primary-s) var(--primary-l));

  --sidebar-background: hsl(0 0% 100%);
  --sidebar-foreground: hsl(222 47% 11%);
  --sidebar-border: hsl(214 32% 91%);
  --sidebar-hover: hsl(210 40% 96%);
  --sidebar-active: hsl(var(--primary-h) var(--primary-s) 96%);

  /* 文本颜色层级 */
  --text-primary: hsl(222 47% 11%);
  --text-secondary: hsl(215 16% 47%);
  --text-tertiary: hsl(215 20% 65%);
  --text-disabled: hsl(215 20% 80%);

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

  /* 字体族 */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Microsoft YaHei", "微软雅黑";
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

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

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

  /* 行高 */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;

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

  /* 基础单位 4px */
  --spacing-xs: 0.25rem;   /* 4px */
  --spacing-sm: 0.5rem;    /* 8px */
  --spacing-md: 1rem;      /* 16px */
  --spacing-lg: 1.5rem;    /* 24px */
  --spacing-xl: 2rem;      /* 32px */
  --spacing-2xl: 3rem;     /* 48px */
  --spacing-3xl: 4rem;     /* 64px */

  /* 布局间距 */
  --layout-padding: var(--spacing-lg);
  --section-gap: var(--spacing-2xl);
  --content-gap: var(--spacing-md);

  /* ========== 圆角 ========== */

  --radius-sm: 0.375rem;   /* 6px */
  --radius-md: 0.5rem;     /* 8px */
  --radius-lg: 0.625rem;   /* 10px */
  --radius-xl: 0.875rem;   /* 14px */
  --radius-2xl: 1.125rem;  /* 18px */
  --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-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

  /* ========== 过渡动画 ========== */

  --transition-fast: 150ms;
  --transition-base: 300ms;
  --transition-slow: 500ms;

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

  /* ========== 布局尺寸 ========== */

  --sidebar-width-expanded: 256px;
  --sidebar-width-collapsed: 64px;
  --topbar-height: 64px;

  /* ========== Z-index 层级 ========== */

  --z-base: 1;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}

/* ========== 暗色主题 ========== */

[data-theme="dark"] {
  /* 中性色 - 暗色主题 */
  --background: hsl(222 47% 11%);
  --foreground: hsl(210 40% 98%);

  --card: hsl(222 47% 14%);
  --card-foreground: hsl(210 40% 98%);

  --popover: hsl(222 47% 14%);
  --popover-foreground: hsl(210 40% 98%);

  --muted: hsl(217 33% 17%);
  --muted-foreground: hsl(215 20% 65%);

  --accent: hsl(217 33% 17%);
  --accent-foreground: hsl(210 40% 98%);

  --border: hsl(217 33% 17%);
  --input: hsl(217 33% 17%);

  --sidebar-background: hsl(222 47% 14%);
  --sidebar-foreground: hsl(210 40% 98%);
  --sidebar-border: hsl(217 33% 17%);
  --sidebar-hover: hsl(217 33% 20%);
  --sidebar-active: hsl(var(--primary-h) var(--primary-s) 25%);

  /* 文本颜色层级 */
  --text-primary: hsl(210 40% 98%);
  --text-secondary: hsl(215 20% 65%);
  --text-tertiary: hsl(215 20% 50%);
  --text-disabled: hsl(215 20% 35%);

  /* 语义色彩暗色调整 */
  --success: hsl(142 76% 45%);
  --warning: hsl(38 92% 60%);
  --error: hsl(0 84% 65%);
  --info: hsl(199 89% 58%);

  /* 阴影暗色调整 */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.3);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.4);
}

/* ========== 全局样式重置 ========== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--foreground);
  background-color: var(--background);
  transition: background-color var(--transition-base) var(--ease-in-out),
              color var(--transition-base) var(--ease-in-out);
}

/* ========== 通用工具类 ========== */

/* 平滑过渡 */
.transition {
  transition: all var(--transition-base) var(--ease-in-out);
}

.transition-fast {
  transition: all var(--transition-fast) var(--ease-in-out);
}

.transition-slow {
  transition: all var(--transition-slow) var(--ease-in-out);
}

/* 文本截断 */
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 无选择 */
.no-select {
  user-select: none;
  -webkit-user-select: none;
}

/* 滚动条样式 */
.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: var(--muted);
  border-radius: var(--radius-full);
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: var(--radius-full);
  transition: background var(--transition-fast);
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--text-tertiary);
}

/* 响应式容器 */
.container {
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}