/* ============================================
   设计令牌系统 - Design Tokens
   ============================================ */

:root {
  /* ========== 主色调 - Primary ========== */
  --color-primary: #0ea5e9;
  --color-primary-dark: #0284c7;
  --color-primary-light: #38bdf8;
  --color-primary-alpha-8: rgba(14, 165, 233, 0.08);
  --color-primary-alpha-10: rgba(14, 165, 233, 0.1);
  --color-primary-alpha-15: rgba(14, 165, 233, 0.15);
  --color-primary-alpha-20: rgba(14, 165, 233, 0.2);
  --color-primary-alpha-40: rgba(14, 165, 233, 0.4);
  --primary-rgb: 14, 165, 233;

  /* ========== 功能色 - Semantic ========== */
  --color-success: #10b981;
  --color-success-dark: #059669;
  --color-success-alpha-8: rgba(16, 185, 129, 0.08);
  --color-success-alpha-10: rgba(16, 185, 129, 0.1);
  --color-success-alpha-15: rgba(16, 185, 129, 0.15);

  --color-warning: #f59e0b;
  --color-warning-dark: #d97706;
  --color-warning-alpha-8: rgba(245, 158, 11, 0.08);
  --color-warning-alpha-10: rgba(245, 158, 11, 0.1);
  --color-warning-alpha-15: rgba(245, 158, 11, 0.15);
  --color-warning-alpha-20: rgba(245, 158, 11, 0.2);

  --color-danger: #ef4444;
  --color-danger-dark: #dc2626;
  --color-danger-alpha-8: rgba(239, 68, 68, 0.08);
  --color-danger-alpha-10: rgba(239, 68, 68, 0.1);
  --color-danger-alpha-15: rgba(239, 68, 68, 0.15);
  --color-danger-alpha-20: rgba(239, 68, 68, 0.2);
  --color-danger-alpha-30: rgba(239, 68, 68, 0.3);

  --color-neutral: #64748b;
  --color-neutral-dark: #475569;
  --color-neutral-alpha-8: rgba(100, 116, 139, 0.08);
  --color-neutral-alpha-10: rgba(100, 116, 139, 0.1);
  --color-neutral-alpha-15: rgba(100, 116, 139, 0.15);

  --color-cyan: #06b6d4;
  --color-cyan-dark: #0891b2;
  --color-cyan-alpha-8: rgba(6, 182, 212, 0.08);
  --color-cyan-alpha-10: rgba(6, 182, 212, 0.1);
  --color-cyan-alpha-15: rgba(6, 182, 212, 0.15);

  --color-indigo: #6366f1;
  --color-indigo-dark: #4f46e5;
  --color-indigo-alpha-8: rgba(99, 102, 241, 0.08);
  --color-indigo-alpha-10: rgba(99, 102, 241, 0.1);
  --color-indigo-alpha-15: rgba(99, 102, 241, 0.15);

  /* ========== 圆角系统 - Border Radius ========== */
  --radius-none: 0;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* ========== 间距系统 - Spacing (4px base) ========== */
  --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;

  /* ========== 字体系统 - Typography ========== */
  --base-font-size: 14px;
  --font-xs: 11px;
  --font-sm: 13px;
  --font-base: 14px;
  --font-lg: 15px;
  --font-xl: 16px;
  --font-2xl: 18px;
  --font-3xl: 24px;
  --font-4xl: 32px;

  --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.6;

  /* ========== 阴影系统 - Box Shadow ========== */
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.20), 0 4px 6px rgba(0, 0, 0, 0.10);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.25), 0 8px 10px rgba(0, 0, 0, 0.12);
  --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.3);

  /* ========== 玻璃态效果 - Backdrop Blur ========== */
  --backdrop-blur-sm: 8px;
  --backdrop-blur-md: 16px;
  --backdrop-blur-lg: 24px;

  /* ========== 动画过渡系统 - Transition ========== */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ========== 标准高度 - Standard Heights ========== */
  --height-input: 36px;
  --height-btn: 36px;
  --height-btn-sm: 30px;
  --height-btn-lg: 42px;

  /* ========== 侧边栏宽度 ========== */
  --sidebar-width: 240px;
  --sidebar-width-collapsed: 64px;

  /* ========== Z-index 层级系统 ========== */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
  --z-notification: 800;
}

/* ========== 预设动画类 ========== */
.animate-fade-in {
  animation: fadeIn var(--transition-normal);
}

.animate-slide-up {
  animation: slideUp var(--transition-normal);
}

.animate-slide-down {
  animation: slideDown var(--transition-normal);
}

.animate-scale-in {
  animation: scaleIn var(--transition-normal);
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-spin {
  animation: spin 1s linear infinite;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}