:root {
  --color-red: #D72638;
  /* CTA buttons, highlights */
  --color-navy: #001027;
  /* Headers, backgrounds */
  --color-lightgray: #F8F9FA;
  /* Background sections, cards */
  --color-white: #FFFFFF;
  /* Primary background */
  --color-darkgray: #343A40;
  /* Text */
  --color-mint: #38BFAF;
  /* Accent */
  --color-sky: #1CA9C9;
  /* Accent alternate */
}

.bg-navy {
  background-color: #001027;
}

.bg-light-gray {
  background-color: #F8F9FA;
}

.bg-light-mint {
  background-color: #ECF5F4;
}

.bg-red {
  background-color: #D72638;
}

.bg-red-dark {
  background-color: #c61f31;
}

.bg-white {
  background-color: #FFFFFF;
}

.bg-white\/10 {
  background-color: rgba(255, 255, 255, 0.1);
}

.bg-white\/50 {
  background-color: rgba(255, 255, 255, 0.5);
}

.text-navy {
  color: #003049;
}

.text-mint {
  color: #38BFAF;
}

.text-sky {
  color: #003049;
}

.text-sky:hover {
  color: #1CA9C9;
}

.text-white {
  color: #FFFFFF;
}

.text-dark-gray {
  color: #343A40;
}


/* Gradient Backgrounds */
.gradient-light {
  background-image: linear-gradient(to right, #F8F9FA, #e6f2f1);
}

.gradient-dark {
  background-image: linear-gradient(to right, #252525, #1a1a1a);
}

.gradient-whitesmoke {
  background-image: linear-gradient(180deg, rgba(244, 244, 249, 0.8) 50%, rgba(244, 244, 249, 0.05) 100%);
}

.gradient-light-alt{
        background: linear-gradient(45deg, #F1F7FF, #F3EAFB);
}

/* Semantic Background Colors (if not defined yet) */
.bg-light-gray {
  background-color: #F8F9FA;
}

.bg-dark-gray {
  background-color: #1a1a1a;
}

.bg-badge-light {
  background-color: rgba(255, 255, 255, 0.7);
}

.bg-badge-dark {
  background-color: rgba(255, 255, 255, 0.1);
}