:root {
  /* 色彩 */
  --color-bg: #0b0c10;
  --color-surface: #111827;
  --color-elevated: #1f2937;
  --color-text: #e5e7eb;
  --color-muted: #9ca3af;

  --color-primary: #4f46e5;
  --color-secondary: #0ea5e9;
  --color-success: #16a34a;
  --color-warning: #ca8a04;
  --color-danger: #dc2626;

  /* 圆角与边框 */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --border-color: color-mix(in oklab, var(--color-text) 10%, transparent);
  --border-width: 1px;

  /* 阴影与描边 */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
  --shadow-md: 0 6px 16px rgba(0,0,0,0.25);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.35);

  /* 字体与字号 */
  --font-family: ui-sans-serif, -apple-system, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --font-size-base: 16px;
  --font-size-sm: 14px;
  --font-size-lg: 18px;
  --line-height: 1.7;

  /* 间距 */
  --space-2xs: 6px;
  --space-xs: 10px;
  --space-sm: 14px;
  --space-md: 20px;
  --space-lg: 28px;
  --space-xl: 36px;
  --space-2xl: 56px;

  /* 过渡 */
  --ease: cubic-bezier(.2,.7,.2,1);
  --duration-fast: 120ms;
  --duration: 200ms;
  --duration-slow: 320ms;

  /* 强调强度（用于主色混合） */
  --accent-surface-strength: 20%;
  --accent-hover-strength: 28%;
  --accent-active-strength: 36%;
}

/* 浅色主题（可切换） */
[data-theme="light"] {
  --color-bg: #f8fafc;
  --color-surface: #ffffff;
  --color-elevated: #f1f5f9;
  --color-text: #0f172a;
  --color-muted: #475569;
  --border-color: color-mix(in oklab, var(--color-text) 16%, transparent);

  /* 浅色背景下进一步减弱饱和以保持高级感 */
  --accent-surface-strength: 14%;
  --accent-hover-strength: 20%;
  --accent-active-strength: 28%;
}

/* 暗色主题（默认） */
[data-theme="dark"] {
  --color-bg: #0b0c10;
  --color-surface: #111827;
  --color-elevated: #1f2937;
  --color-text: #e5e7eb;
  --color-muted: #9ca3af;
}

/* 工具类变量：交互态 */
:root {
  --focus-ring: 0 0 0 3px color-mix(in oklab, var(--color-primary) 40%, transparent);
  --hover-layer: color-mix(in oklab, var(--color-primary) 10%, transparent);
  --active-layer: color-mix(in oklab, var(--color-primary) 20%, transparent);
}