:root {
  color-scheme: dark;
  --font-display: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-ui: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --shadow-subtle: rgba(0, 0, 0, 0.18) 0 4px 24px;
  --shadow-micro: rgba(16, 24, 40, 0.16) 0 1px 4px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0e14;
  --surface-1: #121722;
  --surface-2: #192131;
  --surface-hover: #202a3d;
  --border: #293246;
  --text: #f3f6fb;
  --text-muted: #9aa7bd;
  --accent: #8b7cf6;
  --accent-hover: #a397ff;
  --accent-soft: rgba(139, 124, 246, 0.16);
  --recommend: #75d69c;
  --recommend-soft: rgba(117, 214, 156, 0.12);
  --warning: #f4bd61;
  --danger: #ef7474;
  --focus: #b4aaff;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f7fc;
  --surface-1: #ffffff;
  --surface-2: #edf1f9;
  --surface-hover: #e5eafb;
  --border: #cdd4e2;
  --text: #151827;
  --text-muted: #59627a;
  --accent: #5546cb;
  --accent-hover: #4739b4;
  --accent-soft: rgba(85, 70, 203, 0.12);
  --recommend: #197347;
  --recommend-soft: rgba(25, 115, 71, 0.1);
  --warning: #875500;
  --danger: #b5373c;
  --focus: #3f32a9;
}