:root {
  /* 色彩 */
  --color-bg: #0b0f19;
  --color-surface: #111827;
  --color-text: #e5e7eb;
  --color-text-dim: #9ca3af;
  /* Back-compat alias used by components.css */
  --muted: var(--color-text-dim);
  --color-primary: #6ee7b7;
  --color-accent: #60a5fa;
  --color-danger: #fca5a5;

  /* 字級（以 1rem = 16px 為基準）*/
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;

  /* 陰影/圓角/動效 */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.24);
  --radius-6: 6px;
  --radius-10: 10px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* 使用 data-theme 明確指定主題 */
html[data-theme='light'] {
  --color-bg: #f8fafc;
  --color-surface: #ffffff;
  --color-text: #0f172a;
  --color-text-dim: #475569;
  --muted: var(--color-text-dim);
  --color-primary: #0ea5e9; /* light 模式更鮮明 */
  --color-accent: #2563eb;
  --color-danger: #dc2626;
}

html[data-theme='dark'] {
  --color-bg: #0b0f19;
  --color-surface: #111827;
  --color-text: #e5e7eb;
  --color-text-dim: #9ca3af;
  --muted: var(--color-text-dim);
  --color-primary: #6ee7b7;
  --color-accent: #60a5fa;
  --color-danger: #fca5a5;
}

/* 若未手動指定，依系統偏好 */
@media (prefers-color-scheme: light) {
  html:not([data-theme]) {
    --color-bg: #f8fafc;
    --color-surface: #ffffff;
    --color-text: #0f172a;
    --color-text-dim: #475569;
    --muted: var(--color-text-dim);
    --color-primary: #0ea5e9;
    --color-accent: #2563eb;
    --color-danger: #dc2626;
  }
}