:root {
  --radius-xs: 4px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-pill: 9999px;


  --accent: #9c413a;
  --accent-h: #ffdad6;
  --accent-soft: #9c413a99;


  --border-c: #9c413a4d;
  --border-d: #3d666b4d;

  --green: #4d6835;
  --red: #ba1a1a;
  --teal: #3d666b;
  --white: #ffffff;
  --border: #e7e0df;

  --panel-bkdrop: blur(20px);

  --highlight: #8c4f00;
  --muted: #76777a;
  --gray-soft: #7d7d7d22;
  --gray-mid: #e7e0df88;
  --gray-light: #ffffff88;


  --text: #201a19;
  --bg: #fff8f6;
  --transulent-bg: #fff8f6cc;
  --overlay: #201a191a;
  --img-invert: invert(1);

  --shadow-o: 0px 4px 8px 3px rgba(0, 0, 0, 0.05);
  --shadow-h: inset 0 0 0px 1px #9c413a;

  --alert-bg: #fff8f6ee;
  --alert-heading-bg: #ffdad6;
  --alert-heading: #3b0906;
}

@media (prefers-color-scheme: dark) {
  :root {

    --accent: #ffb4ab;
    --accent-h: #72342e;
    --accent-soft: #ffb4ab99;

    --text: #ede0de;
    --bg: #1a1110;
    --transulent-bg: #2b2120bb;
    --overlay: #00000066;
    --img-invert: invert(0);

    --border: #534341;
    --border-c: #ffb4ab4d;
    --border-d: #a6dce24d;

    --shadow-o: 0px 4px 12px 4px rgba(0, 0, 0, 0.4);
    --shadow-h: inset 0 0 0 1px #ffb4ab;

    --alert-bg: #201a19ee;
    --alert-heading-bg: #3b0906;
    --alert-heading: #ffdad6;

    --gray-mid: #53434188;
    --gray-light: #53434144;
  }
}

::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
  margin-block: 5px;
}

::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: var(--radius-pill);
  cursor: grab;
}

::-webkit-scrollbar-thumb:active {
  background: var(--accent-h);
  cursor: grabbing;
}