/* =========================
   Bootstrap Color Variables
   ========================= */
:root {
    /* Bootstrap color palette */
    --bs-primary: #03a9f4;      /* your chosen primary */
    --bs-secondary: #6c757d;    /* secondary */
    --bs-success: #43a047;      /* success */
    --bs-info: #17a2b8;         /* info */
    --bs-warning: #fbc02d;      /* warning */
    --bs-danger: #e53935;       /* danger */
    --bs-light: #f8f9fa;        /* light */
    --bs-dark: #343a40;         /* dark */

    /* Text colors based on contrast */
    --bs-primary-text: #fff;       /* primary is dark enough, so white text */
    --bs-secondary-text: #fff;     /* secondary dark → white text */
    --bs-success-text: #fff;       /* success green → white text */
    --bs-info-text: #fff;          /* info blue → white text */
    --bs-warning-text: #212529;    /* warning yellow → dark text */
    --bs-danger-text: #fff;        /* danger red → white text */
    --bs-light-text: #212529;      /* light background → dark text */
    --bs-dark-text: #fff;           /* dark background → white text */
}

/* =========================
   Buttons
   ========================= */
.btn-primary { background-color: var(--bs-primary) !important; border-color: var(--bs-primary) !important; color: var(--bs-primary-text) !important; }
.btn-secondary { background-color: var(--bs-secondary) !important; border-color: var(--bs-secondary) !important; color: var(--bs-secondary-text) !important; }
.btn-success { background-color: var(--bs-success) !important; border-color: var(--bs-success) !important; color: var(--bs-success-text) !important; }
.btn-info { background-color: var(--bs-info) !important; border-color: var(--bs-info) !important; color: var(--bs-info-text) !important; }
.btn-warning { background-color: var(--bs-warning) !important; border-color: var(--bs-warning) !important; color: var(--bs-warning-text) !important; }
.btn-danger { background-color: var(--bs-danger) !important; border-color: var(--bs-danger) !important; color: var(--bs-danger-text) !important; }
.btn-light { background-color: var(--bs-light) !important; border-color: var(--bs-light) !important; color: var(--bs-light-text) !important; }
.btn-dark { background-color: var(--bs-dark) !important; border-color: var(--bs-dark) !important; color: var(--bs-dark-text) !important; }

/* =========================
   Backgrounds
   ========================= */
.bg-primary { background-color: var(--bs-primary) !important; color: var(--bs-primary-text) !important; }
.bg-secondary { background-color: var(--bs-secondary) !important; color: var(--bs-secondary-text) !important; }
.bg-success { background-color: var(--bs-success) !important; color: var(--bs-success-text) !important; }
.bg-info { background-color: var(--bs-info) !important; color: var(--bs-info-text) !important; }
.bg-warning { background-color: var(--bs-warning) !important; color: var(--bs-warning-text) !important; }
.bg-danger { background-color: var(--bs-danger) !important; color: var(--bs-danger-text) !important; }
.bg-light { background-color: var(--bs-light) !important; color: var(--bs-light-text) !important; }
.bg-dark { background-color: var(--bs-dark) !important; color: var(--bs-dark-text) !important; }

/* =========================
   Text Colors
   ========================= */
.text-primary { color: var(--bs-primary) !important; }
.text-secondary { color: var(--bs-secondary) !important; }
.text-success { color: var(--bs-success) !important; }
.text-info { color: var(--bs-info) !important; }
.text-warning { color: var(--bs-warning) !important; }
.text-danger { color: var(--bs-danger) !important; }
.text-light { color: var(--bs-light) !important; }
.text-dark { color: var(--bs-dark) !important; }

/* =========================
   Borders
   ========================= */
.border-primary { border-color: var(--bs-primary) !important; }
.border-secondary { border-color: var(--bs-secondary) !important; }
.border-success { border-color: var(--bs-success) !important; }
.border-info { border-color: var(--bs-info) !important; }
.border-warning { border-color: var(--bs-warning) !important; }
.border-danger { border-color: var(--bs-danger) !important; }
.border-light { border-color: var(--bs-light) !important; }
.border-dark { border-color: var(--bs-dark) !important; }

/* =========================
   Alerts
   ========================= */
.alert-primary { background-color: var(--bs-primary) !important; color: var(--bs-primary-text) !important; border-color: var(--bs-primary) !important; }
.alert-secondary { background-color: var(--bs-secondary) !important; color: var(--bs-secondary-text) !important; border-color: var(--bs-secondary) !important; }
.alert-success { background-color: var(--bs-success) !important; color: var(--bs-success-text) !important; border-color: var(--bs-success) !important; }
.alert-info { background-color: var(--bs-info) !important; color: var(--bs-info-text) !important; border-color: var(--bs-info) !important; }
.alert-warning { background-color: var(--bs-warning) !important; color: var(--bs-warning-text) !important; border-color: var(--bs-warning) !important; }
.alert-danger { background-color: var(--bs-danger) !important; color: var(--bs-danger-text) !important; border-color: var(--bs-danger) !important; }
.alert-light { background-color: var(--bs-light) !important; color: var(--bs-light-text) !important; border-color: var(--bs-light) !important; }
.alert-dark { background-color: var(--bs-dark) !important; color: var(--bs-dark-text) !important; border-color: var(--bs-dark) !important; }

/* =========================
   Badges
   ========================= */
.badge-primary { background-color: var(--bs-primary) !important; color: var(--bs-primary-text) !important; }
.badge-secondary { background-color: var(--bs-secondary) !important; color: var(--bs-secondary-text) !important; }
.badge-success { background-color: var(--bs-success) !important; color: var(--bs-success-text) !important; }
.badge-info { background-color: var(--bs-info) !important; color: var(--bs-info-text) !important; }
.badge-warning { background-color: var(--bs-warning) !important; color: var(--bs-warning-text) !important; }
.badge-danger { background-color: var(--bs-danger) !important; color: var(--bs-danger-text) !important; }
.badge-light { background-color: var(--bs-light) !important; color: var(--bs-light-text) !important; }
.badge-dark { background-color: var(--bs-dark) !important; color: var(--bs-dark-text) !important; }

/* =========================
   Tables
   ========================= */
.table-primary { background-color: var(--bs-primary) !important; color: var(--bs-primary-text) !important; }
.table-secondary { background-color: var(--bs-secondary) !important; color: var(--bs-secondary-text) !important; }
.table-success { background-color: var(--bs-success) !important; color: var(--bs-success-text) !important; }
.table-info { background-color: var(--bs-info) !important; color: var(--bs-info-text) !important; }
.table-warning { background-color: var(--bs-warning) !important; color: var(--bs-warning-text) !important; }
.table-danger { background-color: var(--bs-danger) !important; color: var(--bs-danger-text) !important; }
.table-light { background-color: var(--bs-light) !important; color: var(--bs-light-text) !important; }
.table-dark { background-color: var(--bs-dark) !important; color: var(--bs-dark-text) !important; }