/* ============================================
   Design System - Utility First
   原子化设计令牌 | 实用主义风格
   ============================================ */

/* ------------------------------------------
   1. CSS 自定义属性（设计令牌）
   ------------------------------------------ */
:root {
  /* 中性色阶 - Gray Scale */
  --color-gray-50: #fafafa;
  --color-gray-100: #f5f5f5;
  --color-gray-200: #e5e5e5;
  --color-gray-300: #d4d4d4;
  --color-gray-400: #a3a3a3;
  --color-gray-500: #737373;
  --color-gray-600: #525252;
  --color-gray-700: #404040;
  --color-gray-800: #262626;
  --color-gray-900: #171717;

  /* 品牌色 - Brand Colors (1-2 个) */
  --color-brand: #2563eb;           /* Blue-600 */
  --color-brand-light: #3b82f6;     /* Blue-500 */
  --color-brand-dark: #1d4ed8;      /* Blue-700 */
  --color-brand-subtle: #dbeafe;    /* Blue-100 */

  /* 语义色 - Semantic Colors */
  --color-text-primary: var(--color-gray-900);
  --color-text-secondary: var(--color-gray-600);
  --color-text-muted: var(--color-gray-400);
  --color-text-inverse: #ffffff;

  --color-bg-primary: #ffffff;
  --color-bg-secondary: var(--color-gray-50);
  --color-bg-tertiary: var(--color-gray-100);

  --color-border: var(--color-gray-200);
  --color-border-strong: var(--color-gray-300);

  /* 间距刻度 - Spacing Scale (4px base) */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* 字体刻度 - Typography Scale */
  --font-xs: 12px;
  --font-sm: 14px;
  --font-base: 16px;
  --font-lg: 18px;
  --font-xl: 20px;
  --font-2xl: 24px;
  --font-3xl: 30px;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* 圆角刻度 - Radius Scale */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;

  /* 阴影刻度 - Shadow Scale */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.15);

  /* 过渡时间 - Transition Duration */
  --duration-fast: 120ms;
  --duration-normal: 160ms;
  --duration-slow: 240ms;
  --easing-default: ease-out;
}

/* Dark Mode Tokens */
[data-theme="dark"] {
  --color-text-primary: var(--color-gray-100);
  --color-text-secondary: var(--color-gray-400);
  --color-text-muted: var(--color-gray-600);

  --color-bg-primary: var(--color-gray-900);
  --color-bg-secondary: var(--color-gray-800);
  --color-bg-tertiary: var(--color-gray-700);

  --color-border: var(--color-gray-700);
  --color-border-strong: var(--color-gray-600);
}

/* ------------------------------------------
   2. 基础重置与布局
   ------------------------------------------ */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--font-base);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background-color: var(--color-bg-secondary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.site-main {
  flex: 1;
}

/* ------------------------------------------
   3. 原子化工具类 - 过渡动效
   ------------------------------------------ */
.transition-fast {
  transition: all var(--duration-fast) var(--easing-default);
}

.transition-normal {
  transition: all var(--duration-normal) var(--easing-default);
}

.transition-slow {
  transition: all var(--duration-slow) var(--easing-default);
}

.transition-colors {
  transition: color var(--duration-fast) var(--easing-default),
              background-color var(--duration-fast) var(--easing-default),
              border-color var(--duration-fast) var(--easing-default);
}

.transition-transform {
  transition: transform var(--duration-normal) var(--easing-default);
}

.transition-shadow {
  transition: box-shadow var(--duration-normal) var(--easing-default);
}

/* ------------------------------------------
   4. 原子化工具类 - 交互状态
   ------------------------------------------ */
.hover\:bg-subtle:hover {
  background-color: var(--color-bg-tertiary);
}

.hover\:text-brand:hover {
  color: var(--color-brand);
}

.hover\:shadow-md:hover {
  box-shadow: var(--shadow-md);
}

.hover\:shadow-lg:hover {
  box-shadow: var(--shadow-lg);
}

.hover\:-translate-y-0\.5:hover {
  transform: translateY(-2px);
}

.active\:scale-95:active {
  transform: scale(0.95);
}

.focus\:ring:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-brand-subtle), 0 0 0 4px var(--color-brand);
}

/* ------------------------------------------
   5. 组件基类 - 按钮
   ------------------------------------------ */
.btn-ds {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: all var(--duration-fast) var(--easing-default);
}

.btn-ds:hover {
  transform: translateY(-1px);
}

.btn-ds:active {
  transform: translateY(0) scale(0.98);
}

.btn-ds-primary {
  background-color: var(--color-brand);
  color: var(--color-text-inverse);
  border-color: var(--color-brand);
}

.btn-ds-primary:hover {
  background-color: var(--color-brand-dark);
  border-color: var(--color-brand-dark);
  box-shadow: var(--shadow-md);
}

.btn-ds-secondary {
  background-color: transparent;
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}

.btn-ds-secondary:hover {
  background-color: var(--color-bg-tertiary);
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
}

.btn-ds-ghost {
  background-color: transparent;
  color: var(--color-text-secondary);
  border-color: transparent;
}

.btn-ds-ghost:hover {
  background-color: var(--color-bg-tertiary);
  color: var(--color-text-primary);
}

/* ------------------------------------------
   6. 组件基类 - 卡片
   ------------------------------------------ */
.card-ds {
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration-normal) var(--easing-default),
              transform var(--duration-normal) var(--easing-default);
}

.card-ds:hover {
  box-shadow: var(--shadow-md);
}

/* ------------------------------------------
   7. 组件基类 - 输入框
   ------------------------------------------ */
.input-ds {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-sm);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--easing-default),
              box-shadow var(--duration-fast) var(--easing-default);
}

.input-ds:hover {
  border-color: var(--color-border-strong);
}

.input-ds:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px var(--color-brand-subtle);
}

.input-ds::placeholder {
  color: var(--color-text-muted);
}

/* ------------------------------------------
   8. 组件基类 - 导航
   ------------------------------------------ */
.nav-ds {
  background-color: var(--color-bg-primary);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

/* ------------------------------------------
   9. 组件基类 - 标签/徽章
   ------------------------------------------ */
.badge-ds {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  font-size: var(--font-xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  border-radius: var(--radius-full);
  background-color: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
}

/* ------------------------------------------
   10. 多行文本截断
   ------------------------------------------ */
.line-clamp-3 {
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ------------------------------------------
   11. 间距工具类
   ------------------------------------------ */
.gap-ds-1 { gap: var(--space-1); }
.gap-ds-2 { gap: var(--space-2); }
.gap-ds-3 { gap: var(--space-3); }
.gap-ds-4 { gap: var(--space-4); }

/* ------------------------------------------
   11. 旧版兼容 - DaisyUI 主题覆盖
   ------------------------------------------ */
[data-theme=light] {
  --p: 217 91% 60%;      /* Primary: Blue-500 */
  --pf: 221 83% 53%;     /* Primary Focus: Blue-600 */
  --pc: 0 0% 100%;       /* Primary Content: White */
  
  --b1: 0 0% 100%;       /* Base 100: White */
  --b2: 0 0% 96%;        /* Base 200: Gray-50 */
  --b3: 0 0% 91%;        /* Base 300: Gray-200 */
  --bc: 0 0% 9%;         /* Base Content: Gray-900 */
  
  --n: 0 0% 96%;         /* Neutral: Gray-100 */
  --nf: 0 0% 91%;        /* Neutral Focus: Gray-200 */
  --nc: 0 0% 9%;         /* Neutral Content: Gray-900 */
  
  --rounded-box: var(--radius-lg);
  --rounded-btn: var(--radius-md);
  --rounded-badge: var(--radius-full);
}

[data-theme=dark] {
  --p: 217 91% 60%;
  --pf: 213 94% 68%;
  --pc: 0 0% 100%;
  
  --b1: 0 0% 9%;         /* Base 100: Gray-900 */
  --b2: 0 0% 16%;        /* Base 200: Gray-800 */
  --b3: 0 0% 25%;        /* Base 300: Gray-700 */
  --bc: 0 0% 96%;        /* Base Content: Gray-100 */
  
  --n: 0 0% 16%;
  --nf: 0 0% 25%;
  --nc: 0 0% 96%;
}

/* Stats Component Fix */
.stats {
  overflow: visible;
}

.stats .stat {
  border-width: 1px;
  margin-top: -1px;
  margin-bottom: -1px;
}

/* Utility Classes for DaisyUI compatibility */
.hover\:.bg-base-100:hover {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--b1));
}

.hover\:.bg-base-200:hover {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--b2, var(--b1)));
}

.hover\:bg-base-300:hover {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--b3, var(--b2)));
}