body {
  /* sizes */
  --gap: 10px; /* spacing between panels */
  --divider-thickness: 4px; /* thickness of unread messages divider and highlighted message borders */
  --border-thickness: 0px; /* thickness of borders around main panels. DOES NOT AFFECT OTHER BORDERS */

  /* animation/transition options */
  --animations: on; /* off: disable animations/transitions, on: enable animations/transitions */
  --list-item-transition: 0.2s ease; /* transition for list items */
  --dms-icon-svg-transition: 0.35s ease; /* transition for the dms icon */
  --border-hover-transition: 1s ease; /* transition for borders when hovered */
}

/* color options */
:root {
    --colors: on; /* off: discord default colors, on: midnight custom colors */

    /* text colors */
  --text-0: hsl(220, 16%, 95%); /* text on colored elements */
  --text-2: hsl(217.5, 20%, 90%); /* headings and important text */
  --text-3: hsl(219, 30%, 85%); /* normal text */
  --text-4: hsl(220.5, 14%, 75%); /* icon buttons and channels */
  --text-5: hsl(221, 13.5%, 70%); /* muted channels/chats and timestamps */

  /* background and dark colors */
  --bg-1: #303643; /* dark buttons when clicked */
  --bg-2: #343b49; /* dark buttons */
  --bg-3: #3b4252; /* spacing, secondary elements */
  --bg-4: #2e3440; /* main background color */
  --hover: #eceff415; /* channels and buttons when hovered */
  --active: hsl(222, 18%, 35%); /* channels and buttons when clicked or selected */
  --active-2: #2e3440; /* extra state for transparent buttons */
  --message-hover: #3b425240; /* messages when hovered */

  /* accent colors */
  --accent-1: #8fbcbb; /* links and other accent text */
  --accent-2: hsl(179, 25%, 45%); /* small accent elements */
  --accent-3: hsl(193, 25%, 45%); /* accent buttons */
  --accent-4: hsl(193, 25%, 55%); /* accent buttons when hovered */
  --accent-5: hsl(193, 25%, 60%); /* accent buttons when clicked */
  --accent-new: #bf616a; /* stuff that's normally red like mute/deafen buttons */
};