/* Light theme */
html,
html:has(body.light-theme) {
  --background: #ffffff;
  --background-96: #fffffff4;
  --card: #f6f7f7;
  --field: #e9eaeb;
  --disabled: #f1f2f3;
  --overlay: #0b0c0db2;
  --text-main: #17191b;
  --text-secondary: #6b7179;
  --text-secondary-40: #6b717966;
  --text-contrast: #ffffff;
  --divider: #d6d8db;
  --accent: #4380df;
  --accent-hover: #598fe2;
  --accent-10: #4380df33;
  --accent-40: #4380df66;
  --demo: #a42cbd;
  --negative: #db2d26;
  --negative-20: #db2d2633;
  --positive: #34a322;
  --positive-20: #34a32233;
  --medium: #ccac00;
  --medium-20: #ccac0033;
  --tooltip: #000000;
}

/* Dark theme (default) */
html:has(body.dark-theme) {
  --background: #17191b;
  --background-96: #17191bf4;
  --card: #1f2023;
  --field: #2b2d30;
  --disabled: #232528;
  --overlay: #0b0c0db2;
  --text-main: #ffffff;
  --text-secondary: #878c94;
  --text-secondary-40: #878c9466;
  --text-contrast: #ffffff;
  --divider: #3b3e43;
  --accent: #4380df;
  --accent-hover: #598fe2;
  --accent-10: #4380df33;
  --accent-40: #4380df66;
  --demo: #a42cbd;
  --negative: #db2d26;
  --negative-20: #db2d2633;
  --positive: #34a322;
  --positive-20: #34a32233;
  --medium: #ccac00;
  --medium-20: #ccac0033;
  --tooltip: #000000;
}