:root {
  /* Primary colors */
  --primary-color: #1f1f1f; /* Black */
  --secondary-color: #242424; /* Dark gray */
  --highlight-color: #ff9800; /* Orange */

  /* Text colors */
  --primary-text-color: #ffffff; /* White */
  --secondary-text-color: #b3b3b3; /* Light gray */

  /* Background colors */
  --primary-background-color: #292929; /* Soft black */
  --secondary-background-color: #1a1a1a; /* Darker black */

  /* Accent colors */
  --subtle-accent-color: #757575; /* Medium gray */
  --intense-accent-color: #ff5722; /* Intense orange */

  /* Button colors */
  --button-normal-color: #4caf50; /* Green */
  --button-hover-color: #45a049; /* Darker green */
  --button-active-color: #3e8e41; /* Even darker green */

  --button-danger-normal-color: #dc3545; /* Red */
  --button-danger-hover-color: #c82333; /* Darker red */
  --button-danger-active-color: #bd2130; /* Even darker red */

  /* Link colors */
  --link-normal-color: #2196f3; /* Blue */
  --link-hover-color: #1976d2; /* Darker blue */
  --link-visited-color: #9c27b0; /* Purple */

  /* Shades of gray */
  --gray-100: #f5f5f5;
  --gray-200: #eeeeee;
  --gray-300: #e0e0e0;
  --gray-400: #bdbdbd;
  --gray-500: #9e9e9e;
  --gray-600: #757575;
  --gray-700: #616161;
  --gray-800: #424242;
  --gray-900: #212121;

  /* Danger */
  --danger: #dc3545;

  /* Warning */
  --warning: #ffc107;

  /* Success */
  --success: #28a745;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Ubuntu", sans-serif;
}

body {
  background-color: var(--primary-background-color);
  color: var(--primary-text-color);
}

/* Heading styles */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--primary-text-color);
}

/* Paragraph styles */
p {
  color: var(--primary-text-color);
}

/* Link styles */
a {
  color: var(--link-normal-color);
  text-decoration: none;
}

a:hover {
  color: var(--link-hover-color);
}

a:visited {
  color: var(--link-visited-color);
}

/* Button styles */
button {
  background-color: var(--button-normal-color);
  color: var(--primary-text-color);
  font-size: 16px;
  font-weight: 500;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  cursor: pointer;
}

button:hover {
  background-color: var(--button-hover-color);
}

button:active {
  background-color: var(--button-active-color);
}

button.danger {
  background-color: var(--button-danger-normal-color);
}

button.danger:hover {
  background-color: var(--button-danger-hover-color);
}

button.danger:active {
  background-color: var(--button-danger-active-color);
}

/* Input styles */
input {
  padding: 8px;
  border: 1px solid var(--gray-400);
  border-radius: 4px;
  background-color: var(--gray-800);
  color: var(--primary-text-color);
}

input::placeholder {
  color: var(--gray-500);
}

input:hover {
  border-color: var(--gray-200);
}

input:focus {
  outline: none;
  border-color: var(--highlight-color);
}

textarea {
  padding: 8px;
  border: 1px solid var(--gray-400);
  border-radius: 4px;
  background-color: var(--gray-800);
  color: var(--primary-text-color);
}

textarea::placeholder {
  color: var(--gray-500);
}

textarea:hover {
  border-color: var(--gray-200);
}

textarea:focus {
  outline: none;
  border-color: var(--highlight-color);
}

/* Styling the scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

/* Styling the scrollbar thumb */
::-webkit-scrollbar-thumb {
  background-color: var(--gray-500);
  border-radius: 5px;
}

/* Styling the scrollbar track */
::-webkit-scrollbar-track {
  background-color: var(--secondary-background-color);
}

/* Hover styles for the scrollbar thumb */
::-webkit-scrollbar-thumb:hover {
  background-color: var(--gray-300);
}

/* Styling the scrollbar corner */
::-webkit-scrollbar-corner {
  background-color: var(--secondary-background-color);
}