:root {
  color-scheme: light;
  --wd-bg-base: #fafafa;
  --wd-bg-surface: #ffffff;
  --wd-bg-elevated: #f4f4f5;
  --wd-border-soft: #ececef;
  --wd-border-strong: #e2e2e6;
  --wd-text-primary: #09090b;
  --wd-text-secondary: #52525b;
  --wd-text-muted: #a1a1aa;
  --wd-accent: #2563eb;
  --wd-accent-light: #3b82f6;
  --wd-accent-dark: #1d4ed8;
  --wd-accent-grad: #2563eb;
  --wd-accent-soft: #eff4ff;
  --wd-accent-soft-strong: #dbe6ff;
  --wd-ok-bg: #dcfce7;
  --wd-ok-fg: #166534;
  --wd-warn-bg: #fef3c7;
  --wd-warn-fg: #92400e;
  --wd-err-bg: #fee2e2;
  --wd-err-fg: #b91c1c;
  --wd-info-bg: #dbeafe;
  --wd-info-fg: #1d4ed8;
  --wd-radius-sm: 6px;
  --wd-radius-md: 8px;
  --wd-radius-lg: 10px;
  --wd-radius-xl: 12px;
  --wd-radius-pill: 999px;
  --wd-shadow-focus: 0 0 0 3px rgba(37, 99, 235, .2);
  --wd-font-sans: "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", "PingFang SC", "Microsoft YaHei UI", "Noto Sans CJK SC", sans-serif;
  --wd-font-mono: "SF Mono", ui-monospace, Menlo, Consolas, "Cascadia Mono", monospace;

  --bg: var(--wd-bg-base);
  --surface: var(--wd-bg-surface);
  --surface2: var(--wd-bg-elevated);
  --border: var(--wd-border-soft);
  --border2: var(--wd-border-strong);
  --text: var(--wd-text-primary);
  --text2: var(--wd-text-secondary);
  --dim: var(--wd-text-muted);
  --track: var(--wd-bg-elevated);
  --accent: var(--wd-accent);
  --accent2: var(--wd-accent-light);
  --accent-ink: #ffffff;
  --ok: var(--wd-ok-fg);
  --okb: var(--wd-ok-bg);
  --err: var(--wd-err-fg);

  --color-primary: var(--wd-accent);
  --color-primary-high: var(--wd-accent-light);
  --color-primary-light: var(--wd-accent-light);
  --color-primary-low: var(--wd-accent-dark);
  --color-primary-text: #ffffff;
  --color-primary-bg: var(--wd-accent-soft);
  --color-primary-bg-hover: var(--wd-accent-soft-strong);
  --color-primary-translucent-bg: var(--wd-accent-soft);
  --color-primary-gradient-1: var(--wd-accent);
  --color-primary-gradient-2: var(--wd-accent-light);
  --color-bg-wrapper: var(--wd-bg-base);
  --color-bg-container: var(--wd-bg-surface);
  --color-bg-elevated: var(--wd-bg-surface);
  --color-bg-elevated-high: var(--wd-bg-surface);
  --color-bg-elevated-medium: var(--wd-bg-elevated);
  --color-bg-input-transparent: var(--wd-bg-elevated);
  --color-bg-primary: var(--wd-accent-soft);
  --color-bg-plan-card: var(--wd-bg-elevated);
  --color-bg-mask: color-mix(in srgb, var(--wd-bg-surface) 78%, transparent);
  --color-bg-mask-hover: color-mix(in srgb, var(--wd-bg-surface) 88%, transparent);
  --color-container: var(--wd-bg-surface);
  --color-container-hover: var(--wd-bg-elevated);
  --color-wrapper-bg: var(--wd-bg-base);
  --color-border: var(--wd-border-soft);
  --color-border-hover: var(--wd-border-strong);
  --color-border-secondary: var(--wd-border-soft);
  --color-text: var(--wd-text-primary);
  --color-text-secondary: var(--wd-text-secondary);
  --color-text-tertiary: var(--wd-text-muted);
  --color-menu-bg-active: var(--wd-accent-soft);
  --color-menu-bg-hover: var(--wd-bg-elevated);
  --color-menu-text: var(--wd-text-secondary);
  --color-menu-text-active: var(--wd-accent-dark);
  --color-menu-text-hover: var(--wd-text-primary);
  --color-success: var(--wd-ok-fg);
  --color-processing: var(--wd-accent);
  --color-secondary: var(--wd-text-secondary);
  --color-cancel: var(--wd-text-muted);
  --color-stroke-1: var(--wd-accent);
  --color-stroke-2: var(--wd-accent-light);
  --color-tag: var(--wd-accent-soft);
  --color-tag-active: var(--wd-accent);
  --color-card-bg: var(--wd-bg-surface);
  --color-card-bg-hover: var(--wd-bg-elevated);
  --color-card-bg-active: var(--wd-accent-soft);
  --color-app-bg: var(--wd-bg-elevated);
  --color-gray-translucent-bg: color-mix(in srgb, var(--wd-bg-elevated) 82%, transparent);
  --color-bg-transparent-1: color-mix(in srgb, var(--wd-bg-surface) 72%, transparent);
  --color-bg-transparent-2: color-mix(in srgb, var(--wd-bg-surface) 42%, transparent);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --wd-bg-base: #09090b;
  --wd-bg-surface: #0f0f12;
  --wd-bg-elevated: #161619;
  --wd-border-soft: #1f1f23;
  --wd-border-strong: #2a2a30;
  --wd-text-primary: #fafafa;
  --wd-text-secondary: #a1a1aa;
  --wd-text-muted: #71717a;
  --wd-accent: #3b82f6;
  --wd-accent-light: #60a5fa;
  --wd-accent-dark: #93c5fd;
  --wd-accent-grad: #3b82f6;
  --wd-accent-soft: #18233f;
  --wd-accent-soft-strong: #21305a;
  --wd-ok-bg: #0f2a1a;
  --wd-ok-fg: #4ade80;
  --wd-warn-bg: #2a2110;
  --wd-warn-fg: #fbbf24;
  --wd-err-bg: #2a1515;
  --wd-err-fg: #f87171;
  --wd-info-bg: #14233f;
  --wd-info-fg: #60a5fa;
  --wd-shadow-focus: 0 0 0 3px rgba(59, 130, 246, .32);
}