:root {
  --bg: #f7f8f6;
  --surface: #ffffff;
  --surface-2: #eef4f2;
  --text: #17201d;
  --muted: #60706a;
  --line: #d8e1dd;
  --primary: #127c74;
  --primary-strong: #0d5e59;
  --accent: #f06f4f;
  --accent-2: #3557c2;
  --danger: #b42318;
  --shadow: 0 18px 50px rgba(23, 32, 29, 0.1);
  --radius: 8px;
  --container-width: 1120px;
  --tool-width: 960px;
  --radius-card: 24px;
  --radius-control: 12px;
  --control-height: 48px;
  --space-section: 88px;
  --space-card: 28px;
  --checker-size: 16px;
  --checker-light: #f8faf9;
  --checker-dark: #e3ebe7;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #111513;
  --surface: #191f1c;
  --surface-2: #1f2a25;
  --text: #eef4f1;
  --muted: #a5b4ae;
  --line: #31423b;
  --primary: #45c2b6;
  --primary-strong: #7ddbd2;
  --accent: #ff916f;
  --accent-2: #93a7ff;
  --danger: #ff8c82;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
  --checker-light: #202822;
  --checker-dark: #29342e;
  color-scheme: dark;
}