:root {
  /* Primary theme colors */
  --bs-primary: #DF3E52; /* Sidebar and highlight color (matches red theme in screenshot) */
  --bs-secondary: #6d6d6d; /* Darker gray for text or icons */

  /* Backgrounds */
  --bs-body-bg: #F9F9F9; /* Light gray background */
  --bs-card-bg: #FFFFFF; /* White card background */
  --bs-card-border-color: #E0E0E0; /* Light gray card borders */

  /* Typography */
  --bs-body-color: #333333; /* Default text color */
  --bs-heading-color: #DF3E52; /* Red color for headings like "Daily Report" */
  --bs-muted-color: #8B8B8B; /* Muted gray color for secondary text (like "Announcement") */

  /* Button Colors */
  --bs-btn-primary-bg: var(--bs-primary);
  --bs-btn-primary-border-color: var(--bs-primary);
  --bs-btn-primary-color: #FFFFFF; /* Button text color */

  /* Sidebar */
  --bs-sidebar-bg: #F3F3F3; /* Sidebar background color */
  --bs-sidebar-icon-color: var(--bs-secondary); /* Sidebar icons color */

  /* Additional Custom Colors */
  --bs-info: #0084FF; /* Blue for links or interactive text */
  --bs-success: #4CAF50; /* Green for positive values */
  --bs-danger: #DF3E52; /* Red for negative values */

  /* Card components */
  --bs-card-header-color: #4F4F4F; /* Card header color */
}

/* Custom component styles */
body {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}

.sidebar { 
  color: var(--bs-sidebar-icon-color);
}

.card {
  background-color: white;
  border: none; 
}

.card-header {
  color: var(--bs-card-header-color);
}

h1, h2{
  color: var(--bs-heading-color);
  font-weight: bold;
}
h3, h4, h5, h6 {
  color: var(--bs-secondary);
  font-weight: bold;
}

a {
  color: var(--bs-secondary);
}

a:hover {
  color: darken(var(--bs-info), 10%);
}

.btn-primary {
  background-color: var(--bs-btn-primary-bg);
  border-color: var(--bs-btn-primary-border-color);
  color: var(--bs-btn-primary-color);
}

.text-muted {
  color: var(--bs-muted-color) !important;
}

.text-success {
  color: var(--bs-success) !important;
}

.text-danger {
  color: var(--bs-danger) !important;
}
.btn-primary:hover {
  background: var(--bs-primary);
  border-color: var(--bs-primary);
  
}
.btn-primary:active {
  background: var(--bs-primary);
  border-color: var(--bs-primary);

}