:root {
  --primary-color: #ffffff;
  --secondary-color: #f4f7fd;
  --primary-font-color: #000000;
  --secondary-font-color: #828fa3;
  --primary-btn-color: #635fc7;
  --primary-box-shadow: 0px 4px 6px rgba(54, 78, 126, 0.1015); /* Subtle shadow for card depth */
  --sidebar-width: 300px; /* Sidebar fixed width */
  --extra-colour: #e4ebfa; /* Light divider color */
  --black-butnot: #20212C;
  --grey-black: #2B2C37;
  
}

/* Dark mode text for headline and board button */
body.dark-mode #headline-sidepanel, #board-btn {
  color: var(--primary-color);
}
/* Dark mode background and text for main layout */
body.dark-mode #layout{
  background-color: var(--black-butnot);
  color: var(--primary-color);
}

/* Dark mode text for task cards */
body.dark-mode .task-card {
  color: white;
}

/* Dark mode colors for form elements */
body.dark-mode button,
body.dark-mode select,
body.dark-mode input,
body.dark-mode textarea {
  color: var(--secondary-font-color);
  border: 1px solid #444;
}

body.dark-mode .task-div {
  background-color: var(--grey-black);
  color: var(--primary-color);
}

           

body.dark-mode .side-bar  {
  background-color: var(--grey-black);
  color: var(--primary-color);

}

body.dark-mode .boards-nav-links-div {
  background-color: var(--grey-black);
}

body.dark-mode .sticky-header {
  background-color: var(--grey-black);
  color: var(--primary-color);
}

body.dark-mode .theme-toggle-div {
  background-color: var(--primary-color);
}
 
body.dark-mode #sidebar-toggle  {
  background-color: var(--primary-btn-color);
  color: var(--primary-color)
}

body.dark-mode #theme-toggle-div {
  background-color: var(--primary-btn-color);
  color: var(--primary-color)
}

body.dark-mode .theme-switch  {
  background-color: var(--black-butnot);
  
}

body.dark-mode .theme-tog-div {
  background-color: var(--black-butnot);
}