:root {
  color-scheme: light;
  --theme-color: #201d1a;
  --bg: #f5f5f5;
  --surface: #ffffff;
  --surface-alt: #ececec;
  --text: #1a1a1a;
  --text-secondary: #6b6b6b;
  --border: #e0e0e0;
  --primary: #3d5afe;
  --on-primary: #ffffff;
  --link: #2e7d32;
  --accent: #2e7d32;
  --on-accent: #ffffff;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-strong: 0 8px 30px rgba(0, 0, 0, 0.14);
  --active: #dfe3e8;
  --hover: rgba(0, 0, 0, 0.05);
  --scrollbar: #c9c2b7;
  --status-elim: #e8590c;
  --status-abort: #a16207;
  --status-absent: #7c756b;
  --appbar-bg: #201d1a;
  --appbar-text: #efece7;
  --appbar-hover: rgba(255, 255, 255, 0.09);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --theme-color: #121212;
  --bg: #121212;
  --surface: #1c1c1c;
  --surface-alt: #262626;
  --text: #e0e0e0;
  --text-secondary: #9e9e9e;
  --border: #333333;
  --primary: #818cf8;
  --on-primary: #121212;
  --link: #81c784;
  --accent: #2e7d32;
  --on-accent: #ffffff;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-strong: 0 8px 30px rgba(0, 0, 0, 0.6);
  --active: #2c2c2c;
  --hover: rgba(255, 255, 255, 0.06);
  --scrollbar: #4a4a4a;
  --status-elim: #c6551c;
  --status-abort: #9c6f1c;
  --status-absent: #6a6359;
  --appbar-bg: #1a1a1a;
  --appbar-text: #e0e0e0;
  --appbar-hover: rgba(255, 255, 255, 0.08);
}