/**
 * ============================================
 * Design System v1.0
 * 统一设计变量系统
 * ============================================
 */

:root {
  /* ========== 品牌色 ========== */
  --ds-primary: #3b82f6;
  --ds-primary-hover: #2563eb;
  --ds-primary-light: #dbeafe;
  --ds-primary-dark: #1e40af;

  /* ========== 语义色 ========== */
  --ds-success: #10b981;
  --ds-success-hover: #059669;
  --ds-success-light: #d1fae5;

  --ds-danger: #ef4444;
  --ds-danger-hover: #dc2626;
  --ds-danger-light: #fee2e2;

  --ds-warning: #f59e0b;
  --ds-warning-hover: #d97706;
  --ds-warning-light: #fef3c7;

  --ds-info: #06b6d4;
  --ds-info-hover: #0891b2;
  --ds-info-light: #cffafe;

  /* ========== 中性色（灰度） ========== */
  --ds-gray-50: #f9fafb;
  --ds-gray-100: #f3f4f6;
  --ds-gray-200: #e5e7eb;
  --ds-gray-300: #d1d5db;
  --ds-gray-400: #9ca3af;
  --ds-gray-500: #6b7280;
  --ds-gray-600: #4b5563;
  --ds-gray-700: #374151;
  --ds-gray-800: #1f2937;
  --ds-gray-900: #111827;
  --ds-gray-950: #030712;

  /* ========== 背景色 ========== */
  --ds-bg-body: #f8fafc;
  --ds-bg-card: #ffffff;
  --ds-bg-elevated: #ffffff;
  --ds-bg-muted: #f1f5f9;
  --ds-bg-dark: #0f172a;
  --ds-bg-header: #1e293b;

  /* ========== 文本色 ========== */
  --ds-text-primary: #0f172a;
  --ds-text-secondary: #475569;
  --ds-text-muted: #94a3b8;
  --ds-text-disabled: #cbd5e1;
  --ds-text-inverse: #ffffff;
  --ds-text-link: var(--ds-primary);

  /* ========== 边框色 ========== */
  --ds-border: #e2e8f0;
  --ds-border-hover: #cbd5e1;
  --ds-border-focus: var(--ds-primary);
  --ds-border-dark: #334155;

  /* ========== 字体 ========== */
  --ds-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --ds-font-heading: 'Public Sans', var(--ds-font-sans);
  --ds-font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Courier New', monospace;

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

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

  /* ========== 行高 ========== */
  --ds-leading-none: 1;
  --ds-leading-tight: 1.25;
  --ds-leading-snug: 1.375;
  --ds-leading-normal: 1.5;
  --ds-leading-relaxed: 1.625;

  /* ========== 间距 ========== */
  --ds-space-0: 0;
  --ds-space-1: 0.25rem;   /* 4px */
  --ds-space-2: 0.5rem;    /* 8px */
  --ds-space-3: 0.75rem;   /* 12px */
  --ds-space-4: 1rem;      /* 16px */
  --ds-space-5: 1.25rem;   /* 20px */
  --ds-space-6: 1.5rem;    /* 24px */
  --ds-space-8: 2rem;      /* 32px */
  --ds-space-10: 2.5rem;   /* 40px */
  --ds-space-12: 3rem;     /* 48px */
  --ds-space-16: 4rem;     /* 64px */
  --ds-space-20: 5rem;     /* 80px */

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

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

  /* ========== 过渡 ========== */
  --ds-transition-fast: 150ms ease;
  --ds-transition-base: 200ms ease;
  --ds-transition-slow: 300ms ease;

  /* ========== Z-Index ========== */
  --ds-z-dropdown: 1000;
  --ds-z-sticky: 1020;
  --ds-z-fixed: 1030;
  --ds-z-modal-backdrop: 1040;
  --ds-z-modal: 1050;
  --ds-z-popover: 1060;
  --ds-z-tooltip: 1070;
  --ds-z-toast: 1080;

  /* ========== 容器宽度 ========== */
  --ds-container-sm: 640px;
  --ds-container-md: 768px;
  --ds-container-lg: 1024px;
  --ds-container-xl: 1280px;
  --ds-container-2xl: 1536px;
}

/* ========== 暗色模式支持 ========== */
@media (prefers-color-scheme: dark) {
  :root.auto-dark {
    --ds-bg-body: #0f172a;
    --ds-bg-card: #1e293b;
    --ds-bg-elevated: #334155;
    --ds-bg-muted: #1e293b;

    --ds-text-primary: #f1f5f9;
    --ds-text-secondary: #cbd5e1;
    --ds-text-muted: #64748b;

    --ds-border: #334155;
    --ds-border-hover: #475569;
  }
}

/* ============================================
 * 通用组件样式
 * ============================================ */

/* ========== 按钮基础 ========== */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-2);
  padding: var(--ds-space-2) var(--ds-space-4);
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-font-medium);
  line-height: var(--ds-leading-normal);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--ds-radius-lg);
  cursor: pointer;
  transition: all var(--ds-transition-fast);
  white-space: nowrap;
}

.ds-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

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

.ds-btn--primary:hover:not(:disabled) {
  background: var(--ds-primary-hover);
}

.ds-btn--success {
  background: var(--ds-success);
  color: var(--ds-text-inverse);
}

.ds-btn--success:hover:not(:disabled) {
  background: var(--ds-success-hover);
}

.ds-btn--danger {
  background: var(--ds-danger);
  color: var(--ds-text-inverse);
}

.ds-btn--danger:hover:not(:disabled) {
  background: var(--ds-danger-hover);
}

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

.ds-btn--outline:hover:not(:disabled) {
  background: var(--ds-bg-muted);
  border-color: var(--ds-border-hover);
}

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

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

.ds-btn--sm {
  padding: var(--ds-space-1) var(--ds-space-3);
  font-size: var(--ds-text-xs);
}

.ds-btn--lg {
  padding: var(--ds-space-3) var(--ds-space-6);
  font-size: var(--ds-text-base);
}

/* ========== 卡片 ========== */
.ds-card {
  background: var(--ds-bg-card);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-xl);
  box-shadow: var(--ds-shadow-sm);
}

.ds-card--hover:hover {
  box-shadow: var(--ds-shadow-md);
  transform: translateY(-2px);
  transition: all var(--ds-transition-base);
}

.ds-card__header {
  padding: var(--ds-space-4) var(--ds-space-5);
  border-bottom: 1px solid var(--ds-border);
}

.ds-card__body {
  padding: var(--ds-space-5);
}

.ds-card__footer {
  padding: var(--ds-space-4) var(--ds-space-5);
  border-top: 1px solid var(--ds-border);
}

/* ========== 输入框 ========== */
.ds-input {
  width: 100%;
  padding: var(--ds-space-2) var(--ds-space-3);
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-sm);
  line-height: var(--ds-leading-normal);
  color: var(--ds-text-primary);
  background: var(--ds-bg-card);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  outline: none;
  transition: border-color var(--ds-transition-fast), box-shadow var(--ds-transition-fast);
}

.ds-input:focus {
  border-color: var(--ds-primary);
  box-shadow: 0 0 0 3px var(--ds-primary-light);
}

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

.ds-input--error {
  border-color: var(--ds-danger);
}

.ds-input--error:focus {
  box-shadow: 0 0 0 3px var(--ds-danger-light);
}

/* ========== 徽章 ========== */
.ds-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-font-medium);
  line-height: var(--ds-leading-normal);
  border-radius: var(--ds-radius-full);
}

.ds-badge--primary {
  background: var(--ds-primary-light);
  color: var(--ds-primary-dark);
}

.ds-badge--success {
  background: var(--ds-success-light);
  color: #065f46;
}

.ds-badge--danger {
  background: var(--ds-danger-light);
  color: #991b1b;
}

.ds-badge--warning {
  background: var(--ds-warning-light);
  color: #92400e;
}

.ds-badge--gray {
  background: var(--ds-gray-100);
  color: var(--ds-gray-700);
}

/* ========== 分割线 ========== */
.ds-divider {
  height: 1px;
  background: var(--ds-border);
  border: none;
  margin: var(--ds-space-4) 0;
}

/* ========== 文字工具类 ========== */
.ds-text-primary { color: var(--ds-text-primary); }
.ds-text-secondary { color: var(--ds-text-secondary); }
.ds-text-muted { color: var(--ds-text-muted); }
.ds-text-success { color: var(--ds-success); }
.ds-text-danger { color: var(--ds-danger); }
.ds-text-warning { color: var(--ds-warning); }

.ds-text-xs { font-size: var(--ds-text-xs); }
.ds-text-sm { font-size: var(--ds-text-sm); }
.ds-text-base { font-size: var(--ds-text-base); }
.ds-text-lg { font-size: var(--ds-text-lg); }
.ds-text-xl { font-size: var(--ds-text-xl); }
.ds-text-2xl { font-size: var(--ds-text-2xl); }

.ds-font-normal { font-weight: var(--ds-font-normal); }
.ds-font-medium { font-weight: var(--ds-font-medium); }
.ds-font-semibold { font-weight: var(--ds-font-semibold); }
.ds-font-bold { font-weight: var(--ds-font-bold); }

/* ========== 间距工具类 ========== */
.ds-mt-0 { margin-top: var(--ds-space-0); }
.ds-mt-1 { margin-top: var(--ds-space-1); }
.ds-mt-2 { margin-top: var(--ds-space-2); }
.ds-mt-3 { margin-top: var(--ds-space-3); }
.ds-mt-4 { margin-top: var(--ds-space-4); }
.ds-mt-6 { margin-top: var(--ds-space-6); }
.ds-mt-8 { margin-top: var(--ds-space-8); }

.ds-mb-0 { margin-bottom: var(--ds-space-0); }
.ds-mb-1 { margin-bottom: var(--ds-space-1); }
.ds-mb-2 { margin-bottom: var(--ds-space-2); }
.ds-mb-3 { margin-bottom: var(--ds-space-3); }
.ds-mb-4 { margin-bottom: var(--ds-space-4); }
.ds-mb-6 { margin-bottom: var(--ds-space-6); }
.ds-mb-8 { margin-bottom: var(--ds-space-8); }

.ds-p-0 { padding: var(--ds-space-0); }
.ds-p-2 { padding: var(--ds-space-2); }
.ds-p-3 { padding: var(--ds-space-3); }
.ds-p-4 { padding: var(--ds-space-4); }
.ds-p-5 { padding: var(--ds-space-5); }
.ds-p-6 { padding: var(--ds-space-6); }

.ds-px-2 { padding-left: var(--ds-space-2); padding-right: var(--ds-space-2); }
.ds-px-3 { padding-left: var(--ds-space-3); padding-right: var(--ds-space-3); }
.ds-px-4 { padding-left: var(--ds-space-4); padding-right: var(--ds-space-4); }
.ds-px-5 { padding-left: var(--ds-space-5); padding-right: var(--ds-space-5); }

.ds-py-2 { padding-top: var(--ds-space-2); padding-bottom: var(--ds-space-2); }
.ds-py-3 { padding-top: var(--ds-space-3); padding-bottom: var(--ds-space-3); }
.ds-py-4 { padding-top: var(--ds-space-4); padding-bottom: var(--ds-space-4); }
.ds-py-5 { padding-top: var(--ds-space-5); padding-bottom: var(--ds-space-5); }

.ds-gap-1 { gap: var(--ds-space-1); }
.ds-gap-2 { gap: var(--ds-space-2); }
.ds-gap-3 { gap: var(--ds-space-3); }
.ds-gap-4 { gap: var(--ds-space-4); }
.ds-gap-6 { gap: var(--ds-space-6); }

/* ========== 布局工具类 ========== */
.ds-flex { display: flex; }
.ds-inline-flex { display: inline-flex; }
.ds-grid { display: grid; }
.ds-block { display: block; }
.ds-hidden { display: none; }

.ds-flex-col { flex-direction: column; }
.ds-flex-row { flex-direction: row; }
.ds-flex-wrap { flex-wrap: wrap; }

.ds-items-start { align-items: flex-start; }
.ds-items-center { align-items: center; }
.ds-items-end { align-items: flex-end; }

.ds-justify-start { justify-content: flex-start; }
.ds-justify-center { justify-content: center; }
.ds-justify-end { justify-content: flex-end; }
.ds-justify-between { justify-content: space-between; }

.ds-w-full { width: 100%; }
.ds-h-full { height: 100%; }

/* ========== 圆角工具类 ========== */
.ds-rounded-none { border-radius: var(--ds-radius-none); }
.ds-rounded-sm { border-radius: var(--ds-radius-sm); }
.ds-rounded { border-radius: var(--ds-radius-md); }
.ds-rounded-lg { border-radius: var(--ds-radius-lg); }
.ds-rounded-xl { border-radius: var(--ds-radius-xl); }
.ds-rounded-2xl { border-radius: var(--ds-radius-2xl); }
.ds-rounded-full { border-radius: var(--ds-radius-full); }

/* ========== 阴影工具类 ========== */
.ds-shadow-none { box-shadow: none; }
.ds-shadow-sm { box-shadow: var(--ds-shadow-sm); }
.ds-shadow { box-shadow: var(--ds-shadow-md); }
.ds-shadow-lg { box-shadow: var(--ds-shadow-lg); }
.ds-shadow-xl { box-shadow: var(--ds-shadow-xl); }

/* ========== 动画 ========== */
@keyframes ds-spin {
  to { transform: rotate(360deg); }
}

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

@keyframes ds-bounce {
  0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
  50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
}

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

/* ========== 响应式隐藏 ========== */
@media (max-width: 639px) {
  .ds-hide-mobile { display: none !important; }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .ds-hide-tablet { display: none !important; }
}

@media (min-width: 1024px) {
  .ds-hide-desktop { display: none !important; }
}

@media (max-width: 1023px) {
  .ds-show-desktop-only { display: none !important; }
}

@media (min-width: 640px) {
  .ds-show-mobile-only { display: none !important; }
}