/* Define your custom colors */
:root {
  --custom-primary        : #df752f;
  --custom-primary-dark   : #c5641f; /* ~15% darker for hover states */
  --custom-primary-light  : #e89160; /* ~15% lighter for alerts/backgrounds */

  --custom-secondary      : #41b8e4;
  --custom-secondary-dark : #2ea3d1; /* ~15% darker for hover states */
  --custom-secondary-light: #6dcaeb; /* ~15% lighter for alerts/backgrounds */

  --custom-tertiary       : #c14197;
  --custom-tertiary-dark  : #a93681; /* ~15% darker for hover states */
  --custom-tertiary-light : #d067ad; /* ~15% lighter for alerts/backgrounds */

  /* Warning: #fac400 (Yellow) */
  --custom-warning: #fac400;
  --custom-warning-dark: #d9ab00;   /* ~15% darker for hover states */
  --custom-warning-light: #fbd333;  /* ~15% lighter for alerts/backgrounds */

  /* Success: #40be5b (Green) */
  --custom-success: #40be5b;
  --custom-success-dark: #36a54d;   /* ~15% darker for hover states */
  --custom-success-light: #66cb7c;  /* ~15% lighter for alerts/backgrounds */

  /* Info: #00b2cc (Cyan) */
  --custom-info: #00b2cc;
  --custom-info-dark: #0099b3;      /* ~15% darker for hover states */
  --custom-info-light: #33c1d6;     /* ~15% lighter for alerts/backgrounds */

  /* Danger: #e32817 (Red) */
  --custom-danger: #e32817;
  --custom-danger-dark: #c62214;    /* ~15% darker for hover states */
  --custom-danger-light: #e85345;   /* ~15% lighter for alerts/backgrounds */
}

/* ============================================
   WARNING COLOR OVERRIDES
   ============================================ */
.text-warning {
  color: var(--custom-warning) !important;
}

.bg-warning {
  background-color: var(--custom-warning) !important;
}

.btn-warning {
  background-color: var(--custom-warning) !important;
  border-color: var(--custom-warning) !important;
  color: #1f2937 !important;
}

.btn-warning:hover, .btn-warning:focus {
  background-color: var(--custom-warning-dark) !important;
  border-color: var(--custom-warning-dark) !important;
}

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

.btn-outline-warning {
  color: var(--custom-warning) !important;
  border-color: var(--custom-warning) !important;
}

.btn-outline-warning:hover {
  background-color: var(--custom-warning) !important;
  border-color: var(--custom-warning) !important;
  color: #1f2937 !important;
}

.alert-warning {
  background-color: var(--custom-warning-light) !important;
  border-color: var(--custom-warning) !important;
  color: #1f2937 !important;
}

.badge.bg-warning {
  background-color: var(--custom-warning) !important;
  color: #1f2937 !important;
}

.link-warning {
  color: var(--custom-warning) !important;
}

.link-warning:hover {
  color: var(--custom-warning-dark) !important;
}

.border-warning {
  border-color: var(--custom-warning) !important;
}

/* ============================================
   SUCCESS COLOR OVERRIDES
   ============================================ */
.text-success {
  color: var(--custom-success) !important;
}

.bg-success {
  background-color: var(--custom-success) !important;
}

.btn-success {
  background-color: var(--custom-success) !important;
  border-color: var(--custom-success) !important;
  color: white !important;
}

.btn-success:hover, .btn-success:focus {
  background-color: var(--custom-success-dark) !important;
  border-color: var(--custom-success-dark) !important;
}

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

.btn-outline-success {
  color: var(--custom-success) !important;
  border-color: var(--custom-success) !important;
}

.btn-outline-success:hover {
  background-color: var(--custom-success) !important;
  border-color: var(--custom-success) !important;
  color: white !important;
}

.alert-success {
  background-color: var(--custom-success-light) !important;
  border-color: var(--custom-success) !important;
  color: #1f2937 !important;
}

.badge.bg-success {
  background-color: var(--custom-success) !important;
}

.link-success {
  color: var(--custom-success) !important;
}

.link-success:hover {
  color: var(--custom-success-dark) !important;
}

.border-success {
  border-color: var(--custom-success) !important;
}

/* ============================================
   INFO COLOR OVERRIDES
   ============================================ */
.text-info {
  color: var(--custom-info) !important;
}

.bg-info {
  background-color: var(--custom-info) !important;
}

.btn-info {
  background-color: var(--custom-info) !important;
  border-color: var(--custom-info) !important;
  color: white !important;
}

.btn-info:hover, .btn-info:focus {
  background-color: var(--custom-info-dark) !important;
  border-color: var(--custom-info-dark) !important;
}

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

.btn-outline-info {
  color: var(--custom-info) !important;
  border-color: var(--custom-info) !important;
}

.btn-outline-info:hover {
  background-color: var(--custom-info) !important;
  border-color: var(--custom-info) !important;
  color: white !important;
}

.alert-info {
  background-color: var(--custom-info-light) !important;
  border-color: var(--custom-info) !important;
  color: #1f2937 !important;
}

.badge.bg-info {
  background-color: var(--custom-info) !important;
}

.link-info {
  color: var(--custom-info) !important;
}

.link-info:hover {
  color: var(--custom-info-dark) !important;
}

.border-info {
  border-color: var(--custom-info) !important;
}

/* ============================================
   DANGER COLOR OVERRIDES
   ============================================ */
.text-danger {
  color: var(--custom-danger) !important;
}

.bg-danger {
  background-color: var(--custom-danger) !important;
}

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

.btn-danger:hover, .btn-danger:focus {
  background-color: var(--custom-danger-dark) !important;
  border-color: var(--custom-danger-dark) !important;
}

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

.btn-outline-danger {
  color: var(--custom-danger) !important;
  border-color: var(--custom-danger) !important;
}

.btn-outline-danger:hover {
  background-color: var(--custom-danger) !important;
  border-color: var(--custom-danger) !important;
  color: white !important;
}

.alert-danger {
  background-color: var(--custom-danger-light) !important;
  border-color: var(--custom-danger) !important;
  color: #1f2937 !important;
}

.badge.bg-danger {
  background-color: var(--custom-danger) !important;
}

.link-danger {
  color: var(--custom-danger) !important;
}

.link-danger:hover {
  color: var(--custom-danger-dark) !important;
}

.border-danger {
  border-color: var(--custom-danger) !important;
}

/* ============================================
   PRIMARY COLOR OVERRIDES
   ============================================ */
/* Text colors */
.text-primary {
    color: var(--custom-primary) !important;
}

/* Background colors */
.bg-primary {
    background-color: var(--custom-primary) !important;
}

/* Buttons */
.btn-primary {
    background-color: var(--custom-primary) !important;
    border-color: var(--custom-primary) !important;
    color: white !important;
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--custom-primary-dark) !important;
    border-color: var(--custom-primary-dark) !important;
}

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

/* Outline buttons */
.btn-outline-primary {
    color: var(--custom-primary) !important;
    border-color: var(--custom-primary) !important;
}

.btn-outline-primary:hover {
    background-color: var(--custom-primary) !important;
    border-color: var(--custom-primary) !important;
    color: white !important;
}

/* Alerts */
.alert-primary {
    background-color: var(--custom-primary-light) !important;
    border-color: var(--custom-primary) !important;
    color: #1f2937 !important;
}

/* Badges */
.badge.bg-primary {
    background-color: var(--custom-primary) !important;
}

/* Links */
.link-primary {
    color: var(--custom-primary) !important;
}

.link-primary:hover {
    color: var(--custom-primary-dark) !important;
}

/* Borders */
.border-primary {
    border-color: var(--custom-primary) !important;
}

/* ============================================
   SECONDARY COLOR OVERRIDES
   ============================================ */
.text-secondary {
    color: var(--custom-secondary) !important;
}

.bg-secondary {
    background-color: var(--custom-secondary) !important;
}

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

.btn-secondary:hover, .btn-secondary:focus {
    background-color: var(--custom-secondary-dark) !important;
    border-color: var(--custom-secondary-dark) !important;
}

.btn-outline-secondary {
    color: var(--custom-secondary) !important;
    border-color: var(--custom-secondary) !important;
}

.btn-outline-secondary:hover {
    background-color: var(--custom-secondary) !important;
    border-color: var(--custom-secondary) !important;
    color: white !important;
}

.alert-secondary {
    background-color: var(--custom-secondary-light) !important;
    border-color: var(--custom-secondary) !important;
    color: #1f2937 !important;
}

.badge.bg-secondary {
    background-color: var(--custom-secondary) !important;
}

.link-secondary {
    color: var(--custom-secondary) !important;
}

.link-secondary:hover {
    color: var(--custom-secondary-dark) !important;
}

.border-secondary {
    border-color: var(--custom-secondary) !important;
}

/* ============================================
   TERTIARY COLOR OVERRIDES (Bootstrap 5.3+)
   ============================================ */
.text-tertiary {
    color: var(--custom-tertiary) !important;
}

.bg-tertiary {
    background-color: var(--custom-tertiary) !important;
}

.btn-tertiary {
    background-color: var(--custom-tertiary) !important;
    border-color: var(--custom-tertiary) !important;
    color: white !important;
}

.btn-tertiary:hover, .btn-tertiary:focus {
    background-color: var(--custom-tertiary-dark) !important;
    border-color: var(--custom-tertiary-dark) !important;
}

.btn-outline-tertiary {
    color: var(--custom-tertiary) !important;
    border-color: var(--custom-tertiary) !important;
}

.btn-outline-tertiary:hover {
    background-color: var(--custom-tertiary) !important;
    border-color: var(--custom-tertiary) !important;
    color: white !important;
}

.alert-tertiary {
    background-color: var(--custom-tertiary-light) !important;
    border-color: var(--custom-tertiary) !important;
    color: #1f2937 !important;
}

.badge.bg-tertiary {
    background-color: var(--custom-tertiary) !important;
}

.link-tertiary {
    color: var(--custom-tertiary) !important;
}

.link-tertiary:hover {
    color: var(--custom-tertiary-dark) !important;
}

.border-tertiary {
    border-color: var(--custom-tertiary) !important;
}
