/* 烟火味工作台：9 色令牌 + 字号/间距/触控令牌。暗色为默认。 */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  --wb-color-primary: #e84a3c;
  --wb-color-secondary: #ff9f43;
  --wb-color-bg-dark: #1a1a2e;
  --wb-color-bg-light: #f8f9fa;
  --wb-color-success: #2ecc71;
  --wb-color-warning: #f1c40f;
  --wb-color-danger: #e74c3c;
  --wb-color-card-dark: #16213e;
  --wb-color-card-light: #ffffff;

  --wb-bg: var(--wb-color-bg-dark);
  --wb-bg-elevated: #20203a;
  --wb-surface: var(--wb-color-card-dark);
  --wb-surface-2: #1d2947;
  --wb-surface-3: #243253;
  --wb-text: #f8f9fa;
  --wb-text-strong: #ffffff;
  --wb-muted: #aeb4c2;
  --wb-subtle: #7e879c;
  --wb-border: rgba(255, 255, 255, 0.12);
  --wb-border-strong: rgba(255, 255, 255, 0.22);
  --wb-primary-soft: rgba(232, 74, 60, 0.16);
  --wb-secondary-soft: rgba(255, 159, 67, 0.14);
  --wb-success-soft: rgba(46, 204, 113, 0.14);
  --wb-warning-soft: rgba(241, 196, 15, 0.14);
  --wb-danger-soft: rgba(231, 76, 60, 0.16);
  --wb-shadow: 0 16px 40px rgba(0, 0, 0, 0.32);
  --wb-shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.22);
  --wb-overlay: rgba(5, 7, 18, 0.72);

  --wb-font-page-title: 24px;
  --wb-font-section-title: 20px;
  --wb-font-body: 16px;
  --wb-font-hint: 14px;
  --wb-font-label: 12px;
  --wb-font-metric: 32px;
  --wb-font-weight-bold: 700;
  --wb-font-weight-regular: 400;

  --wb-space-1: 4px;
  --wb-space-2: 8px;
  --wb-space-3: 12px;
  --wb-space-4: 16px;
  --wb-space-5: 24px;
  --wb-space-6: 32px;
  --wb-space-7: 40px;

  --wb-radius-card: 12px;
  --wb-radius-pill: 999px;
  --wb-radius-control: 10px;
  --wb-gutter: 16px;
  --wb-content-max: 1320px;
  --wb-touch: 44px;
  --wb-button-height: 48px;
  --wb-button-secondary-height: 40px;
  --wb-icon-button: 44px;
  --wb-sidebar-width: 248px;
  --wb-header-height: 72px;
  --wb-line-height: 1.55;
}

[data-theme="light"] {
  color-scheme: light;

  --wb-bg: var(--wb-color-bg-light);
  --wb-bg-elevated: #ffffff;
  --wb-surface: var(--wb-color-card-light);
  --wb-surface-2: #f1f3f6;
  --wb-surface-3: #e9edf2;
  --wb-text: #1a1a2e;
  --wb-text-strong: #111827;
  --wb-muted: #5f6678;
  --wb-subtle: #7b8496;
  --wb-border: rgba(26, 26, 46, 0.12);
  --wb-border-strong: rgba(26, 26, 46, 0.22);
  --wb-primary-soft: rgba(232, 74, 60, 0.1);
  --wb-secondary-soft: rgba(255, 159, 67, 0.12);
  --wb-success-soft: rgba(46, 204, 113, 0.12);
  --wb-warning-soft: rgba(241, 196, 15, 0.16);
  --wb-danger-soft: rgba(231, 76, 60, 0.1);
  --wb-shadow: 0 16px 40px rgba(33, 37, 41, 0.12);
  --wb-shadow-soft: 0 8px 24px rgba(33, 37, 41, 0.08);
  --wb-overlay: rgba(33, 37, 41, 0.34);
}

@media (min-width: 768px) {
  :root,
  [data-theme="dark"],
  [data-theme="light"] {
    --wb-gutter: 24px;
  }
}