:root {
  --bg: #F5F7F7;
  --sf: #FFFFFF;
  --ink: #172B25;
  --mut: #5A726B;
  --ln: #DCE5E2;
  --p: #1F3B33;
  --s: #C9B28A;
  --onp: #FFFFFF;
  --p-text: #1F3B33;
  --cat-dark: #1C352E;
  --cat-light: #F7F5F2;
  --cat-ink: #182521;
  --cat-accent: #1F3B33;
  --w-bg: #F7F5F2;
  --w-ink: #182521;
  --w-paper: #FFFFFF;
  --w-paper-ink: #182521;
  --w-deep: #D1D2CE;
  --s-text: #866C3E;
  --s-fill: #1F3B33;
  --on-s: #FFFFFF;
  color-scheme: light;
  --r: 6px;
  --r-btn: 999px;
  --f: "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, sans-serif;
}
html[data-mode="dark"] {
  --bg: #101312;
  --sf: #1A1E1D;
  --ink: #EBE9E5;
  --mut: #99A8A4;
  --ln: #2E3332;
  --p: #1F3B33;
  --s: #C9B28A;
  --onp: #FFFFFF;
  --p-text: #498B78;
  --cat-dark: #101312;
  --cat-light: #F7F5F2;
  --cat-ink: #182521;
  --cat-accent: #1F3B33;
  --w-bg: #1C352E;
  --w-ink: #F7F5F2;
  --w-paper: #101312;
  --w-paper-ink: #EBE9E5;
  --w-deep: #142520;
  --s-text: #C9B28A;
  --s-fill: #C9B28A;
  --on-s: #1C352E;
  color-scheme: dark;
}
html[data-mode="light"] {
  --bg: #F5F7F7;
  --sf: #FFFFFF;
  --ink: #172B25;
  --mut: #5A726B;
  --ln: #DCE5E2;
  --p: #1F3B33;
  --s: #C9B28A;
  --onp: #FFFFFF;
  --p-text: #1F3B33;
  --cat-dark: #1C352E;
  --cat-light: #F7F5F2;
  --cat-ink: #182521;
  --cat-accent: #1F3B33;
  --w-bg: #F7F5F2;
  --w-ink: #182521;
  --w-paper: #FFFFFF;
  --w-paper-ink: #182521;
  --w-deep: #D1D2CE;
  --s-text: #866C3E;
  --s-fill: #1F3B33;
  --on-s: #FFFFFF;
  color-scheme: light;
}