/* Your palette */
:root {
  --charcoal: #1c1c1f;
  --slate: #323740;
  --cyan: #00b3e3;
  --coral: #df144c;
  --light-pink: #fff0f0;

  /* Bootstrap color overrides */
  --bs-primary: var(--cyan);
  --bs-secondary: var(--slate);
  --bs-dark: var(--charcoal);
  --bs-danger: var(--coral);
  --bs-light: var(--light-pink);

  /* Optional additional mappings */
  --bs-info: var(--cyan);
  --bs-warning: var(--coral);
  --bs-success: var(--cyan); /* or choose another */
}

/* Button overrides (Bootstrap still uses some direct colors) */
.btn-primary {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

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

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

.btn-light {
  background-color: var(--bs-light) !important;
  border-color: var(--bs-light) !important;
  color: var(--bs-dark) !important;
}

.btn-dark {
  background-color: var(--bs-dark) !important;
  border-color: var(--bs-dark) !important;
}

/* Text color overrides */
.text-primary { color: var(--bs-primary) !important; }
.text-secondary { color: var(--bs-secondary) !important; }
.text-danger { color: var(--bs-danger) !important; }
.text-light { color: var(--bs-light) !important; }
.text-dark { color: var(--bs-dark) !important; }

/* Background overrides */
.bg-primary { background-color: var(--bs-primary) !important; }
.bg-secondary { background-color: var(--bs-secondary) !important; }
.bg-danger { background-color: var(--bs-danger) !important; }
.bg-light { background-color: var(--bs-light) !important; }
.bg-dark { background-color: var(--bs-dark) !important; }