:root {
  --grister-orange: #ff6600;
  --grister-orange-highlighted: #ff8533; /* Lighter orange for hover/active states */
  --grister-orange-dark: #e65c00; /* Darker orange for gradient */
  --grister-gray: #3f3f3f;
}

.grister-bg-dark {
  background-color: var(--grister-gray);
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--grister-orange);
  --bs-btn-border-color: var(--grister-orange);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--grister-orange-highlighted);
  --bs-btn-hover-border-color: var(--grister-orange-highlighted);
  --bs-btn-focus-shadow-rgb: 255, 102, 0;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--grister-orange-highlighted);
  --bs-btn-active-border-color: var(--grister-orange-highlighted);
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--grister-orange);
  --bs-btn-disabled-border-color: var(--grister-orange);
}

.btn-primary:hover,
.btn.bg-gradient-primary:hover {
  background-color: var(--grister-orange-highlighted);
  border-color: var(--grister-orange-highlighted);
}

.btn-primary:active,
.btn.bg-gradient-primary:active {
  background-color: var(--grister-orange-highlighted) !important;
  border-color: var(--grister-orange-highlighted) !important;
}

.form-switch .form-check-input:checked {
  border-color: rgba(255, 102, 0, 0.95); /* --grister-orange with opacity */
  background-color: rgba(255, 102, 0, 0.95);
}

.form-check-input:checked[type="checkbox"] {
  --bs-form-check-bg-image: linear-gradient(
    310deg,
    var(--grister-orange) 0%,
    var(--grister-orange-dark) 100%
  );
}

.bg-gradient-primary {
  background-image: linear-gradient(
    310deg,
    var(--grister-orange) 0%,
    var(--grister-orange-dark) 100%
  );
}