:root {
  /* Primary Colors */
  --color-primary: #5091cd;      /* United Nations Blue */
  --color-primary-dark: #0c3358; /* Prussian Blue */
  --color-secondary: #0e4b80;    /* Indigo Dye */
  --color-light: #eeeeee;        /* Anti-flash White */
  --color-dark: #404040;         /* Onyx */
  --color-orange: #DA654A;       /* Orange */

  /* Utility variations */
  --color-primary-hover: #4582be;
  --color-primary-active: #3a73af;
  --color-text-on-primary: #ffffff;
  --color-text-on-dark: #ffffff;
  --color-text-on-light: var(--color-dark);
}

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

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

/* Border utility classes */
.border-primary { border-color: var(--color-primary) !important; }
.border-primary-dark { border-color: var(--color-primary-dark) !important; }
.border-secondary { border-color: var(--color-secondary) !important; }
.border-light { border-color: var(--color-light) !important; }
.border-dark { border-color: var(--color-dark) !important; }

/* Button styles */
.btn-primary {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-text-on-primary) !important;
}

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

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

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

.btn-outline-primary:hover {
  background-color: var(--color-primary) !important;
  color: var(--color-text-on-primary) !important;
}

/* Checkbox styles */
input[type="checkbox"] {
  accent-color: var(--color-primary) !important;
}

/* For custom checkboxes using Bootstrap's form-check */
.form-check-input:checked {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

/* Alert styles */
.alert-primary {
  background-color: rgba(80, 145, 205, 0.1) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-primary-dark) !important;
}

.alert-secondary {
  background-color: rgba(14, 75, 128, 0.1) !important;
  border-color: var(--color-secondary) !important;
  color: var(--color-secondary) !important;
}

.alert-dark {
  background-color: rgba(12, 51, 88, 0.1) !important;
  border-color: var(--color-primary-dark) !important;
  color: var(--color-primary-dark) !important;
}