:root {
  --bg: #F7F6F5;
  --sf: #FFFFFF;
  --ink: #24211F;
  --mut: #6E645E;
  --ln: #E3E0DE;
  --p: #3A3532;
  --s: #E69D00;
  --onp: #FFFFFF;
  --p-text: #3A3532;
  --cat-dark: #2C2826;
  --cat-light: #F7F6F2;
  --cat-ink: #211E1C;
  --cat-accent: #3A3532;
  --w-bg: #F7F6F2;
  --w-ink: #211E1C;
  --w-paper: #FFFFFF;
  --w-paper-ink: #211E1C;
  --w-deep: #D3D1CE;
  --s-text: #946500;
  --s-fill: #3A3532;
  --on-s: #FFFFFF;
  color-scheme: light;
  --r: 6px;
  --r-btn: 999px;
  --f: "Montserrat", "Noto Kufi Arabic", system-ui, sans-serif;
}
html[data-mode="dark"] {
  --bg: #131211;
  --sf: #1E1C1A;
  --ink: #EBE9E5;
  --mut: #A89F9A;
  --ln: #33302E;
  --p: #3A3532;
  --s: #E69D00;
  --onp: #FFFFFF;
  --p-text: #877B74;
  --cat-dark: #131211;
  --cat-light: #F7F6F2;
  --cat-ink: #211E1C;
  --cat-accent: #3A3532;
  --w-bg: #2C2826;
  --w-ink: #F7F6F2;
  --w-paper: #131211;
  --w-paper-ink: #EBE9E5;
  --w-deep: #1F1C1B;
  --s-text: #E69D00;
  --s-fill: #E69D00;
  --on-s: #2C2826;
  color-scheme: dark;
}
html[data-mode="light"] {
  --bg: #F7F6F5;
  --sf: #FFFFFF;
  --ink: #24211F;
  --mut: #6E645E;
  --ln: #E3E0DE;
  --p: #3A3532;
  --s: #E69D00;
  --onp: #FFFFFF;
  --p-text: #3A3532;
  --cat-dark: #2C2826;
  --cat-light: #F7F6F2;
  --cat-ink: #211E1C;
  --cat-accent: #3A3532;
  --w-bg: #F7F6F2;
  --w-ink: #211E1C;
  --w-paper: #FFFFFF;
  --w-paper-ink: #211E1C;
  --w-deep: #D3D1CE;
  --s-text: #946500;
  --s-fill: #3A3532;
  --on-s: #FFFFFF;
  color-scheme: light;
}