:root {
  --bs-body-bg: #f8f9fa;
  --bs-body-color: #212529;
  --bs-border-color: #dee2e6;
  --bs-primary: #0d6efd;
  --bs-secondary: #6c757d;
}

/* General Styles */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}
.mobile-back-button {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #212529;
  z-index: 9999;
  padding: 0.75rem 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  border-bottom: 1px solid #444;
}

.mobile-back-button a {
  display: block;
  width: 100%;
  text-align: left;
}
@media (max-width: 991px) {
  body {
    padding-top: 70px; /* makes space for fixed back button */
  }
}
main {
  flex: 1;
  background-color: var(--bs-body-bg);
}

/* Card and Container Styling */
.card {
  background-color: white;
  border-color: var(--bs-border-color);
}

.form-control, .form-select {
  background-color: white;
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}

.form-control:focus, .form-select:focus {
  background-color: white;
  color: var(--bs-body-color);
}

/* Color Preview Styles */
.color-preview,
.random-color-preview,
.color-sample,
.palette-color,
.scheme-color {
  background-color: white;
  border: 1px solid var(--bs-border-color);
}

/* Hover effect */
.palette-color:hover {
  transform: scale(1.05);
}

.palette-color .color-hex,
.scheme-color .color-info {
  background-color: rgba(255, 255, 255, 0.85);
  color: #000;
}

/* Progress Bar */
.progress {
  background-color: #e9ecef;
}

/* Button Styling */
.btn-primary {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

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

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

.btn-outline-primary:hover {
  background-color: var(--bs-primary);
  color: white;
}

/* Table Styling */
.table {
  color: var(--bs-body-color);
  --bs-table-bg: white;
  --bs-table-striped-bg: rgba(0, 0, 0, 0.03);
  --bs-table-hover-bg: rgba(0, 0, 0, 0.05);
}

/* Navbar Styling */
.navbar {
  background-color: #ffffff !important;
}

.navbar-brand, .nav-link {
  color: var(--bs-body-color) !important;
}

/* Footer Styling */
.footer {
  background-color: #ffffff;
  color: var(--bs-body-color);
}

/* Responsive Adjustments */
@media (max-width: 767px) {
  .palette-color {
    height: 60px;
  }
}

/* Copy Notification */
.copy-notification {
  background-color: #ffffff;
  color: #000;
  border-color: var(--bs-border-color);
}

/* Toast container */
.toast-container {
  top: 20px;
  right: 20px;
  z-index: 1050;
}

.toast {
  background-color: #ffffff;
  color: #000;
  border-color: var(--bs-border-color);
}

/* Tooltip Styling */
.tooltip {
  --bs-tooltip-bg: #6c757d;
}

/* Modal Styling */
.modal-content {
  background-color: white;
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}

.modal-header, .modal-footer {
  border-color: var(--bs-border-color);
}

/* Accordion Styling */
.accordion {
  --bs-accordion-bg: white;
  --bs-accordion-border-color: var(--bs-border-color);
  --bs-accordion-btn-color: var(--bs-body-color);
  --bs-accordion-btn-bg: white;
  --bs-accordion-active-color: white;
  --bs-accordion-active-bg: var(--bs-primary);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}