:root {
  color-scheme: light;
  --color-accent: #303034;
  --color-accent-strong: #212124;
  --color-accent-soft: #f3f3f4;
  --color-accent-border: #d7d7dc;
  --on-accent: #ffffff;
  --color-like: #d63e5c;
  --color-link: #286d96;
  --surface: #ffffff;
  --surface-subtle: #f7f7f8;
  --surface-elevated: #ffffff;
  --border-color: #dedee3;
  --text-main: #212124;
  --text-sub: #626269;
  --text-muted: #73737b;
  --overlay: rgba(20, 22, 28, .46);
  --color-danger: #c52f28;
  --color-danger-soft: #fff0ee;
  --color-danger-solid: #c52f28;
  --on-danger: #ffffff;
  --color-success: #23744e;
  --color-success-soft: #eaf6ef;
  --color-warning: #87621f;
  --color-warning-soft: #fff6e6;
  --scrollbar: rgba(0, 0, 0, .16);
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --color-accent: #e4e7ee;
  --color-accent-strong: #f0f2f7;
  --color-accent-soft: #292d37;
  --color-accent-border: #4c5363;
  --on-accent: #17191f;
  --color-like: #ff8299;
  --color-link: #93c9ef;
  --surface: #17191f;
  --surface-subtle: #101217;
  --surface-elevated: #22252e;
  --border-color: #373c49;
  --text-main: #f0f2f7;
  --text-sub: #bdc3d0;
  --text-muted: #9da6b7;
  --overlay: rgba(0, 0, 0, .66);
  --color-danger: #ff9a92;
  --color-danger-soft: #3b2428;
  --color-danger-solid: #b72c29;
  --on-danger: #ffffff;
  --color-success: #86d6ad;
  --color-success-soft: #1d352c;
  --color-warning: #e9c580;
  --color-warning-soft: #352d20;
  --scrollbar: rgba(255, 255, 255, .24);
}