/* ===================================================================
 * cailag 设计系统 v1.0 — 共享CSS (设计即代码，改一处全站同步)
 * Apple / Hugo Boss 深色专业风格
 * 由九脑创造脑设计 | 2026-06-13
 * ===================================================================
 * 使用方法：
 *   <link rel="stylesheet" href="/assets/design-system.css">
 *   页面的私有样式写在自身 <style> 中，继承此文件变量
 *   
 *   如需更新：修改此文件 → 所有引用页面立即生效
 * =================================================================== */

/* ========== 1. 设计 Token (CSS 自定义属性) ========== */
:root {
  /* --- 颜色 --- */
  --ds-bg: #000000;
  --ds-bg-secondary: #0a0a0a;
  --ds-bg-card: #111111;
  --ds-bg-elevated: #1a1a1a;
  --ds-bg-hover: #222222;
  --ds-border: #2a2a2a;
  --ds-border-light: #333333;
  --ds-text: #ffffff;
  --ds-text-secondary: #a0a0a0;
  --ds-text-tertiary: #666666;
  --ds-accent: #0071e3;
  --ds-accent-hover: #0077ed;
  --ds-accent-active: #006edb;
  --ds-success: #30d158;
  --ds-warning: #ffd60a;
  --ds-error: #ff453a;
  --ds-info: #5e5ce6;

  /* --- 排版 --- */
  --ds-font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif;
  --ds-font-mono: 'SF Mono', 'Fira Code', 'Roboto Mono', monospace;
  --ds-font-size-xs: 11px;
  --ds-font-size-sm: 12px;
  --ds-font-size-base: 14px;
  --ds-font-size-lg: 16px;
  --ds-font-size-xl: 20px;
  --ds-font-size-2xl: 24px;
  --ds-font-size-3xl: 32px;

  /* --- 间距 (4px 基准) --- */
  --ds-space-xs: 4px;
  --ds-space-sm: 8px;
  --ds-space-md: 12px;
  --ds-space-base: 16px;
  --ds-space-lg: 20px;
  --ds-space-xl: 24px;
  --ds-space-2xl: 32px;
  --ds-space-4xl: 48px;
  --ds-space-5xl: 64px;

  /* --- 圆角 --- */
  --ds-radius-sm: 4px;
  --ds-radius-md: 8px;
  --ds-radius-lg: 12px;
  --ds-radius-xl: 16px;
  --ds-radius-full: 9999px;

  /* --- 阴影 --- */
  --ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --ds-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  --ds-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
  --ds-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.6);
  --ds-shadow-glow: 0 0 20px rgba(0, 113, 227, 0.3);

  /* --- 过渡 --- */
  --ds-transition-fast: 150ms ease;
  --ds-transition-base: 250ms ease;
  --ds-transition-slow: 400ms ease;

  /* 兼容旧变量名（逐步迁移） */
  --color-bg-primary: var(--ds-bg);
  --color-text-primary: var(--ds-text);
  --color-accent: var(--ds-accent);
  --color-border: var(--ds-border);
  --font-family-primary: var(--ds-font);
}

/* ========== 2. 基础重置 ========== */
.ds-theme *,
.ds-theme *::before,
.ds-theme *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.ds-theme body {
  font-family: var(--ds-font);
  font-size: var(--ds-font-size-base);
  line-height: 1.6;
  color: var(--ds-text);
  background-color: var(--ds-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ds-theme h1, .ds-theme h2, .ds-theme h3 {
  font-family: var(--ds-font);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.ds-theme a { color: var(--ds-accent); text-decoration: none; transition: color var(--ds-transition-fast); }
.ds-theme a:hover { color: var(--ds-accent-hover); }

/* ========== 3. 按钮 ========== */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--ds-space-sm); padding: var(--ds-space-sm) var(--ds-space-base);
  font-family: var(--ds-font); font-size: var(--ds-font-size-base);
  font-weight: 500; line-height: 1;
  border: 1px solid transparent; border-radius: var(--ds-radius-md);
  cursor: pointer; transition: all var(--ds-transition-fast);
  text-decoration: none; white-space: nowrap; user-select: none;
}
.ds-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.ds-btn-primary { background: var(--ds-accent); color: #fff; border-color: var(--ds-accent); }
.ds-btn-primary:hover:not(:disabled) { background: var(--ds-accent-hover); box-shadow: var(--ds-shadow-glow); }
.ds-btn-secondary { background: transparent; color: var(--ds-text); border-color: var(--ds-border); }
.ds-btn-secondary:hover:not(:disabled) { background: var(--ds-bg-hover); border-color: var(--ds-border-light); }
.ds-btn-ghost { background: transparent; color: var(--ds-text-secondary); border-color: transparent; }
.ds-btn-ghost:hover:not(:disabled) { background: var(--ds-bg-hover); color: var(--ds-text); }
.ds-btn-danger { background: var(--ds-error); color: #fff; border-color: var(--ds-error); }
.ds-btn-sm { padding: var(--ds-space-xs) var(--ds-space-sm); font-size: var(--ds-font-size-sm); }
.ds-btn-lg { padding: var(--ds-space-md) var(--ds-space-lg); font-size: var(--ds-font-size-lg); }

/* ========== 4. 卡片 ========== */
.ds-card {
  background: var(--ds-bg-card);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  padding: var(--ds-space-xl);
  transition: border-color var(--ds-transition-fast);
}
.ds-card:hover { border-color: var(--ds-border-light); }

/* ========== 5. 输入框 ========== */
.ds-input {
  width: 100%; padding: var(--ds-space-sm) var(--ds-space-md);
  font-size: var(--ds-font-size-base); font-family: var(--ds-font);
  color: var(--ds-text); background: var(--ds-bg-elevated);
  border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md);
  outline: none; transition: all var(--ds-transition-fast);
}
.ds-input::placeholder { color: var(--ds-text-tertiary); }
.ds-input:focus { border-color: var(--ds-accent); box-shadow: 0 0 0 3px rgba(0,113,227,0.2); }
.ds-input.error { border-color: var(--ds-error); }
.ds-input.error:focus { box-shadow: 0 0 0 3px rgba(255,69,58,0.2); }

/* ========== 6. 徽标 ========== */
.ds-badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px; font-size: var(--ds-font-size-xs);
  font-weight: 500; border-radius: var(--ds-radius-full); line-height: 1.4;
}
.ds-badge-primary { background: rgba(0,113,227,0.15); color: var(--ds-accent); }
.ds-badge-success { background: rgba(48,209,88,0.15); color: var(--ds-success); }
.ds-badge-warning { background: rgba(255,214,10,0.15); color: var(--ds-warning); }
.ds-badge-error   { background: rgba(255,69,58,0.15); color: var(--ds-error); }
.ds-badge-info    { background: rgba(94,92,230,0.15); color: var(--ds-info); }

/* ========== 7. 进度条 ========== */
.ds-progress { width: 100%; height: 4px; background: var(--ds-bg-elevated); border-radius: var(--ds-radius-full); overflow: hidden; }
.ds-progress-bar { height: 100%; background: var(--ds-accent); border-radius: var(--ds-radius-full); transition: width var(--ds-transition-base); }

/* ========== 8. Tooltip ========== */
.ds-tooltip { position: relative; display: inline-block; }
.ds-tooltip-content {
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%); padding: var(--ds-space-xs) var(--ds-space-sm);
  font-size: var(--ds-font-size-xs); color: #fff;
  background: var(--ds-bg-elevated); border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm); white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity var(--ds-transition-fast);
}
.ds-tooltip:hover .ds-tooltip-content { opacity: 1; }

/* ========== 9. 弹窗 ========== */
.ds-modal-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; z-index: 300;
}
.ds-modal {
  background: var(--ds-bg-card); border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-xl); padding: var(--ds-space-xl);
  max-width: 480px; width: 90%; box-shadow: var(--ds-shadow-xl);
}

/* ========== 10. 分隔线 ========== */
.ds-divider { width: 100%; height: 1px; background: var(--ds-border); margin: var(--ds-space-base) 0; }

/* ========== 11. 骨架屏 ========== */
.ds-skeleton {
  background: linear-gradient(90deg, var(--ds-bg-elevated) 25%, var(--ds-bg-hover) 50%, var(--ds-bg-elevated) 75%);
  background-size: 200% 100%; animation: ds-shimmer 1.5s infinite; border-radius: var(--ds-radius-sm);
}
@keyframes ds-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ========== 12. 栅格 ========== */
.ds-grid { display: grid; gap: var(--ds-space-base); }
.ds-grid-2 { grid-template-columns: repeat(2, 1fr); }
.ds-grid-3 { grid-template-columns: repeat(3, 1fr); }
.ds-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 768px) { .ds-grid-2, .ds-grid-3, .ds-grid-4 { grid-template-columns: 1fr; } }

/* ========== 13. 深色模式切换支持 ========== */
.ds-theme-light {
  --ds-bg: #ffffff;
  --ds-bg-secondary: #f5f5f7;
  --ds-bg-card: #ffffff;
  --ds-bg-elevated: #f0f0f5;
  --ds-bg-hover: #e8e8ed;
  --ds-border: #d0d0d6;
  --ds-border-light: #c0c0c6;
  --ds-text: #1d1d1f;
  --ds-text-secondary: #6e6e73;
  --ds-text-tertiary: #a1a1a6;
}