/**
 * dapeng.uno Design Tokens v2.3.0
 * 官方生产级设计系统 (Design System)
 */
:root {
  /* 基础单色基准 */
  --dp-ink: #111111;
  --dp-ink-secondary: #555555;
  --dp-paper: #F4F4F1;
  --dp-surface: #FFFFFF;
  --dp-field: #EAEAE6;
  --dp-border: #E5E5E2;
  --dp-gray: #8A8A8A;

  /* 状态颜色 */
  --dp-status-success: #10B981;
  --dp-status-warning: #F59E0B;
  --dp-status-error: #EF4444;
  --dp-status-info: #06B6D4;

  /* 4px 栅格间距 */
  --dp-space-1: 4px;
  --dp-space-2: 8px;
  --dp-space-3: 12px;
  --dp-space-4: 16px;
  --dp-space-6: 24px;
  --dp-space-8: 32px;

  /* 字体与字阶 */
  --dp-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Noto Sans SC", sans-serif;
  --dp-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --dp-text-xs: 11px;
  --dp-text-sm: 13px;
  --dp-text-base: 14px;
  --dp-text-lg: 18px;
  --dp-text-xl: 24px;

  /* 倒角系统 */
  --dp-radius-sm: 4px;
  --dp-radius-card: 10px;
  --dp-radius-squircle: 14px;
  --dp-radius-pill: 9999px;

  /* 动效缓动 */
  --dp-ease-out: cubic-bezier(.22, 1, .36, 1);
  --dp-ease-spring: cubic-bezier(.175, .885, .32, 1.275);
}

[data-theme="dark"] {
  --dp-ink: #F4F4F1;
  --dp-ink-secondary: #A1A1A1;
  --dp-paper: #111111;
  --dp-surface: #171717;
  --dp-field: #1F1F1F;
  --dp-border: #262626;
  --dp-gray: #8A8A8A;
}

/* 子产品统一导航栏锁定样式 */
.dp-header-lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--dp-space-2);
  text-decoration: none;
  color: var(--dp-ink);
  font-family: var(--dp-font-sans);
  user-select: none;
}
.dp-header-lockup svg, .dp-header-lockup img {
  width: 20px;
  height: 20px;
  display: block;
}
.dp-header-lockup .dp-brand {
  font-weight: 700;
  font-size: var(--dp-text-base);
  letter-spacing: -0.02em;
}
.dp-header-lockup .dp-sep {
  color: var(--dp-gray);
  font-weight: 300;
  margin: 0 1px;
  opacity: 0.6;
}
.dp-header-lockup .dp-product {
  font-family: var(--dp-font-mono);
  font-size: var(--dp-text-sm);
  color: var(--dp-gray);
  letter-spacing: 0.02em;
}

/* 按钮通用样式与加载中间态 (Button Loading States) */
.dp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dp-space-2);
  padding: 8px 18px;
  border-radius: var(--dp-radius-pill);
  font-family: var(--dp-font-sans);
  font-size: var(--dp-text-sm);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s var(--dp-ease-out);
  position: relative;
  white-space: nowrap;
  user-select: none;
}
.dp-btn:active:not(.loading) { transform: scale(0.97); }
.dp-btn.loading {
  cursor: wait;
  pointer-events: none;
  opacity: 0.85;
}
.dp-btn .dp-btn-spinner {
  display: none;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: dp-spin 0.65s linear infinite;
}
.dp-btn.loading .dp-btn-spinner { display: inline-block; }

.dp-btn-primary { background: var(--dp-ink); color: var(--dp-paper); }
.dp-btn-secondary { background: var(--dp-field); color: var(--dp-ink); border-color: var(--dp-border); }
.dp-btn-outline { background: transparent; color: var(--dp-ink); border-color: var(--dp-border); }
.dp-btn-destructive { background: var(--dp-status-error); color: #FFFFFF; }
.dp-btn-sm { padding: 5px 12px; font-size: var(--dp-text-xs); }
.dp-btn-lg { padding: 12px 24px; font-size: var(--dp-text-base); }

/* 骨架屏动画 Shimmer */
@keyframes dp-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.dp-skeleton {
  background: linear-gradient(90deg, var(--dp-field) 25%, var(--dp-border) 50%, var(--dp-field) 75%);
  background-size: 200% 100%;
  animation: dp-shimmer 1.8s ease-in-out infinite;
  border-radius: var(--dp-radius-sm);
}

@keyframes dp-spin {
  100% { transform: rotate(360deg); }
}