/* =========================================================
   DARK THEME BOOTSTRAP 5.3+ OUTLINE BUTTON OVERRIDES
   ========================================================= */

/* PRIMARY */
[data-bs-theme="dark"] .btn-outline-primary,
[data-theme="dark"] .btn-outline-primary {
  --bs-btn-color: #6ea8fe;
  --bs-btn-border-color: #6ea8fe;
  --bs-btn-hover-color: #0b0f19;
  --bs-btn-hover-bg: #6ea8fe;
  --bs-btn-hover-border-color: #6ea8fe;
  --bs-btn-active-color: #0b0f19;
  --bs-btn-active-bg: #6ea8fe;
  --bs-btn-active-border-color: #6ea8fe;
}

/* SECONDARY */
[data-bs-theme="dark"] .btn-outline-secondary,
[data-theme="dark"] .btn-outline-secondary {
  --bs-btn-color: #adb5bd;
  --bs-btn-border-color: #adb5bd;
  --bs-btn-hover-color: #0b0f19;
  --bs-btn-hover-bg: #adb5bd;
  --bs-btn-hover-border-color: #adb5bd;
  --bs-btn-active-color: #0b0f19;
  --bs-btn-active-bg: #adb5bd;
  --bs-btn-active-border-color: #adb5bd;
}

/* SUCCESS */
[data-bs-theme="dark"] .btn-outline-success,
[data-theme="dark"] .btn-outline-success {
  --bs-btn-color: #51cf66;
  --bs-btn-border-color: #51cf66;
  --bs-btn-hover-color: #0b0f19;
  --bs-btn-hover-bg: #51cf66;
  --bs-btn-hover-border-color: #51cf66;
  --bs-btn-active-color: #0b0f19;
  --bs-btn-active-bg: #51cf66;
  --bs-btn-active-border-color: #51cf66;
}

/* DANGER */
[data-bs-theme="dark"] .btn-outline-danger,
[data-theme="dark"] .btn-outline-danger {
  --bs-btn-color: #ff6b6b;
  --bs-btn-border-color: #ff6b6b;
  --bs-btn-hover-color: #0b0f19;
  --bs-btn-hover-bg: #ff6b6b;
  --bs-btn-hover-border-color: #ff6b6b;
  --bs-btn-active-color: #0b0f19;
  --bs-btn-active-bg: #ff6b6b;
  --bs-btn-active-border-color: #ff6b6b;
}

/* WARNING */
[data-bs-theme="dark"] .btn-outline-warning,
[data-theme="dark"] .btn-outline-warning {
  --bs-btn-color: #ffd43b;
  --bs-btn-border-color: #ffd43b;
  --bs-btn-hover-color: #1a1a1a;
  --bs-btn-hover-bg: #ffd43b;
  --bs-btn-hover-border-color: #ffd43b;
  --bs-btn-active-color: #1a1a1a;
  --bs-btn-active-bg: #ffd43b;
  --bs-btn-active-border-color: #ffd43b;
}

/* INFO */
[data-bs-theme="dark"] .btn-outline-info,
[data-theme="dark"] .btn-outline-info {
  --bs-btn-color: #3bc9db;
  --bs-btn-border-color: #3bc9db;
  --bs-btn-hover-color: #0b0f19;
  --bs-btn-hover-bg: #3bc9db;
  --bs-btn-hover-border-color: #3bc9db;
  --bs-btn-active-color: #0b0f19;
  --bs-btn-active-bg: #3bc9db;
  --bs-btn-active-border-color: #3bc9db;
}

/* LIGHT */
[data-bs-theme="dark"] .btn-outline-light,
[data-theme="dark"] .btn-outline-light {
  --bs-btn-color: #f1f3f5;
  --bs-btn-border-color: #f1f3f5;
  --bs-btn-hover-color: #121212;
  --bs-btn-hover-bg: #f1f3f5;
  --bs-btn-hover-border-color: #f1f3f5;
  --bs-btn-active-color: #121212;
  --bs-btn-active-bg: #f1f3f5;
  --bs-btn-active-border-color: #f1f3f5;
}

/* DARK */
[data-bs-theme="dark"] .btn-outline-dark,
[data-theme="dark"] .btn-outline-dark {
  --bs-btn-color: #ced4da;
  --bs-btn-border-color: #ced4da;
  --bs-btn-hover-color: #121212;
  --bs-btn-hover-bg: #ced4da;
  --bs-btn-hover-border-color: #ced4da;
  --bs-btn-active-color: #121212;
  --bs-btn-active-bg: #ced4da;
  --bs-btn-active-border-color: #ced4da;
}

:root, [data-bs-theme="light"] {
  /* Bootstrap Overrides */
  --bs-warning: #e08504;
  --bs-warning-rgb: 224, 133, 4;
  --bs-danger: #dc2626;
  --bs-danger-rgb: 220, 38, 38;
  --bs-success: #16a34a;
  --bs-success-rgb: 22, 163, 74;
  --bs-primary: #2563eb;
  --bs-primary-rgb: 37, 99, 235;
  --bs-secondary: #6b7280;
  --bs-secondary-rgb: 107, 114, 128;
  --bs-info: #06b6d4;
  --bs-info-rgb: 6, 182, 212;
  /* SHEX Custom Colors */
  --shex-gold: #b8860b;
  --shex-silver: #6c757d;
  --shex-bronze: #8b4513;
  --shex-red: #c92a2a;
  --shex-orange: #d9480f;
  --shex-yellow: #e67700;
  --shex-green: #2b8a3e;
  --shex-teal: #0b7285;
  --shex-cyan: #088d9e;
  --shex-blue: #1864ab;
  --shex-indigo: #364fc7;
  --shex-purple: #7340bd;
  --shex-pink: #a61e4d;
  --shex-lime: #5c940d;
  --shex-gray: #343a40;
  --shex-white: #000000;
  --shex-amber: #c27c00;
  --shex-apricot: #d66a2c;
  --shex-coral: #cc5c4c;
  --shex-salmon: #c44536;
  --shex-crimson: #a4161a;
  --shex-ruby: #9b2226;
  --shex-magenta: #a61e6e;
  --shex-fuchsia: #9c36b5;
  --shex-violet: #5f3dc4;
  --shex-lavender: #7950f2;
  --shex-plum: #7b2cbf;
  --shex-grape: #6a1b9a;
  --shex-mint: #2f9e8f;
  --shex-emerald: #1b7f5f;
  --shex-jade: #2b8a6e;
  --shex-olive: #5c6f1e;
  --shex-forest: #2d6a4f;
  --shex-turquoise: #0ca678;
  --shex-sky: #338bde;
  --shex-azure: #1864ab;
  --shex-electric: #0b7285;
  --shex-steel: #495057;
  --shex-slate: #343a40;
  --shex-charcoal: #212529;
  --shex-chocolate: #7f5539;
  --shex-copper: #b45309;
  --shex-rosegold: #b76e79;
  --shex-peach: #e8590c;
  --shex-sand: #a68a64;
  --shex-ice: #74c0fc;
  --shex-neon: #2f9e44;
  --shex-neonpink: #c9184a;
  /* Legacy 2px Thick Borders */
  --leg-brd-purple: #a855f7;
  --leg-brd-blue: #3b82f6;
  --leg-brd-emerald: #10b981;
  --leg-brd-orange: #f97316;
  --leg-brd-red: #ef4444;
}

/* ========================================================== */
/* 2. THEME PALETTE & VARIABLES (DARK MODE OVERRIDES)         */
/* ========================================================== */
[data-bs-theme="dark"] {
  /* Bootstrap Overrides */
  --bs-warning: #ffc107;
  --bs-warning-rgb: 255, 193, 7;
  --bs-danger: #f87171;
  --bs-danger-rgb: 248, 113, 113;
  --bs-success: #4ade80;
  --bs-success-rgb: 74, 222, 128;
  --bs-primary: #60a5fa;
  --bs-primary-rgb: 96, 165, 250;
  --bs-secondary: #9ca3af;
  --bs-secondary-rgb: 156, 163, 175;
  --bs-info: #67e8f9;
  --bs-info-rgb: 103, 232, 249;
  /* SHEX Custom Colors */
  --shex-gold: #ffd700;
  --shex-silver: #e9ecef;
  --shex-bronze: #cd7f32;
  --shex-red: #ff6b6b;
  --shex-orange: #ffa94d;
  --shex-yellow: #ffd43b;
  --shex-green: #51cf66;
  --shex-teal: #3bc9db;
  --shex-cyan: #66d9e8;
  --shex-blue: #4dabf7;
  --shex-indigo: #748ffc;
  --shex-purple: #9677f2;
  --shex-pink: #f783ac;
  --shex-lime: #a9e34b;
  --shex-gray: #dee2e6;
  --shex-white: #ffffff;
  --shex-amber: #ffc107;
  --shex-apricot: #ffb385;
  --shex-coral: #ff8a7a;
  --shex-salmon: #ff7f7f;
  --shex-crimson: #ff4d6d;
  --shex-ruby: #ff6b81;
  --shex-magenta: #f065c0;
  --shex-fuchsia: #e599f7;
  --shex-violet: #b197fc;
  --shex-lavender: #d0bfff;
  --shex-plum: #c77dff;
  --shex-grape: #d0a2f7;
  --shex-mint: #63e6be;
  --shex-emerald: #38d9a9;
  --shex-jade: #63e6be;
  --shex-olive: #c0eb75;
  --shex-forest: #74c69d;
  --shex-turquoise: #63e6be;
  --shex-sky: #74c0fc;
  --shex-azure: #91a7ff;
  --shex-electric: #3bc9db;
  --shex-steel: #adb5bd;
  --shex-slate: #ced4da;
  --shex-charcoal: #f1f3f5;
  --shex-chocolate: #ddb892;
  --shex-copper: #f4a261;
  --shex-rosegold: #ffb4a2;
  --shex-peach: #ffadad;
  --shex-sand: #e9d8a6;
  --shex-ice: #e7f5ff;
  --shex-neon: #69ff94;
  --shex-neonpink: #ff4d9d;
  /* Legacy 2px Thick Borders */
  --leg-brd-purple: #c084fc;
  --leg-brd-blue: #93c5fd;
  --leg-brd-emerald: #6ee7b7;
  --leg-brd-orange: #fdba74;
  --leg-brd-red: #fca5a5;
}

/* ========================================================== */
/* 3. UTILITY CLASSES (Auto-adapts based on browser theme)    */
/* ========================================================== */

.text-gold-shex {
  color: var(--shex-gold) !important;
}

.border-gold-shex {
  border-color: var(--shex-gold) !important;
}

.text-silver-shex {
  color: var(--shex-silver) !important;
}

.border-silver-shex {
  border-color: var(--shex-silver) !important;
}

.text-bronze-shex {
  color: var(--shex-bronze) !important;
}

.border-bronze-shex {
  border-color: var(--shex-bronze) !important;
}

.text-red-shex {
  color: var(--shex-red) !important;
}

.border-red-shex {
  border-color: var(--shex-red) !important;
}

.text-orange-shex {
  color: var(--shex-orange) !important;
}

.border-orange-shex {
  border-color: var(--shex-orange) !important;
}

.text-yellow-shex {
  color: var(--shex-yellow) !important;
}

.border-yellow-shex {
  border-color: var(--shex-yellow) !important;
}

.text-green-shex {
  color: var(--shex-green) !important;
}

.border-green-shex {
  border-color: var(--shex-green) !important;
}

.text-teal-shex {
  color: var(--shex-teal) !important;
}

.border-teal-shex {
  border-color: var(--shex-teal) !important;
}

.text-cyan-shex {
  color: var(--shex-cyan) !important;
}

.border-cyan-shex {
  border-color: var(--shex-cyan) !important;
}

.text-blue-shex {
  color: var(--shex-blue) !important;
}

.border-blue-shex {
  border-color: var(--shex-blue) !important;
}

.text-indigo-shex {
  color: var(--shex-indigo) !important;
}

.border-indigo-shex {
  border-color: var(--shex-indigo) !important;
}

.text-purple-shex {
  color: var(--shex-purple) !important;
}

.border-purple-shex {
  border-color: var(--shex-purple) !important;
}

.text-pink-shex {
  color: var(--shex-pink) !important;
}

.border-pink-shex {
  border-color: var(--shex-pink) !important;
}

.text-lime-shex {
  color: var(--shex-lime) !important;
}

.border-lime-shex {
  border-color: var(--shex-lime) !important;
}

.text-gray-shex {
  color: var(--shex-gray) !important;
}

.border-gray-shex {
  border-color: var(--shex-gray) !important;
}

.text-white-shex {
  color: var(--shex-white) !important;
}

.border-white-shex {
  border-color: var(--shex-white) !important;
}

.text-amber-shex {
  color: var(--shex-amber) !important;
}

.border-amber-shex {
  border-color: var(--shex-amber) !important;
}

.text-apricot-shex {
  color: var(--shex-apricot) !important;
}

.border-apricot-shex {
  border-color: var(--shex-apricot) !important;
}

.text-coral-shex {
  color: var(--shex-coral) !important;
}

.border-coral-shex {
  border-color: var(--shex-coral) !important;
}

.text-salmon-shex {
  color: var(--shex-salmon) !important;
}

.border-salmon-shex {
  border-color: var(--shex-salmon) !important;
}

.text-crimson-shex {
  color: var(--shex-crimson) !important;
}

.border-crimson-shex {
  border-color: var(--shex-crimson) !important;
}

.text-ruby-shex {
  color: var(--shex-ruby) !important;
}

.border-ruby-shex {
  border-color: var(--shex-ruby) !important;
}

.text-magenta-shex {
  color: var(--shex-magenta) !important;
}

.border-magenta-shex {
  border-color: var(--shex-magenta) !important;
}

.text-fuchsia-shex {
  color: var(--shex-fuchsia) !important;
}

.border-fuchsia-shex {
  border-color: var(--shex-fuchsia) !important;
}

.text-violet-shex {
  color: var(--shex-violet) !important;
}

.border-violet-shex {
  border-color: var(--shex-violet) !important;
}

.text-lavender-shex {
  color: var(--shex-lavender) !important;
}

.border-lavender-shex {
  border-color: var(--shex-lavender) !important;
}

.text-plum-shex {
  color: var(--shex-plum) !important;
}

.border-plum-shex {
  border-color: var(--shex-plum) !important;
}

.text-grape-shex {
  color: var(--shex-grape) !important;
}

.border-grape-shex {
  border-color: var(--shex-grape) !important;
}

.text-mint-shex {
  color: var(--shex-mint) !important;
}

.border-mint-shex {
  border-color: var(--shex-mint) !important;
}

.text-emerald-shex {
  color: var(--shex-emerald) !important;
}

.border-emerald-shex {
  border-color: var(--shex-emerald) !important;
}

.text-jade-shex {
  color: var(--shex-jade) !important;
}

.border-jade-shex {
  border-color: var(--shex-jade) !important;
}

.text-olive-shex {
  color: var(--shex-olive) !important;
}

.border-olive-shex {
  border-color: var(--shex-olive) !important;
}

.text-forest-shex {
  color: var(--shex-forest) !important;
}

.border-forest-shex {
  border-color: var(--shex-forest) !important;
}

.text-turquoise-shex {
  color: var(--shex-turquoise) !important;
}

.border-turquoise-shex {
  border-color: var(--shex-turquoise) !important;
}

.text-sky-shex {
  color: var(--shex-sky) !important;
}

.border-sky-shex {
  border-color: var(--shex-sky) !important;
}

.text-azure-shex {
  color: var(--shex-azure) !important;
}

.border-azure-shex {
  border-color: var(--shex-azure) !important;
}

.text-electric-shex {
  color: var(--shex-electric) !important;
}

.border-electric-shex {
  border-color: var(--shex-electric) !important;
}

.text-steel-shex {
  color: var(--shex-steel) !important;
}

.border-steel-shex {
  border-color: var(--shex-steel) !important;
}

.text-slate-shex {
  color: var(--shex-slate) !important;
}

.border-slate-shex {
  border-color: var(--shex-slate) !important;
}

.text-charcoal-shex {
  color: var(--shex-charcoal) !important;
}

.border-charcoal-shex {
  border-color: var(--shex-charcoal) !important;
}

.text-chocolate-shex {
  color: var(--shex-chocolate) !important;
}

.border-chocolate-shex {
  border-color: var(--shex-chocolate) !important;
}

.text-copper-shex {
  color: var(--shex-copper) !important;
}

.border-copper-shex {
  border-color: var(--shex-copper) !important;
}

.text-rosegold-shex {
  color: var(--shex-rosegold) !important;
}

.border-rosegold-shex {
  border-color: var(--shex-rosegold) !important;
}

.text-peach-shex {
  color: var(--shex-peach) !important;
}

.border-peach-shex {
  border-color: var(--shex-peach) !important;
}

.text-sand-shex {
  color: var(--shex-sand) !important;
}

.border-sand-shex {
  border-color: var(--shex-sand) !important;
}

.text-ice-shex {
  color: var(--shex-ice) !important;
}

.border-ice-shex {
  border-color: var(--shex-ice) !important;
}

.text-neon-shex {
  color: var(--shex-neon) !important;
}

.border-neon-shex {
  border-color: var(--shex-neon) !important;
}

.text-neonpink-shex {
  color: var(--shex-neonpink) !important;
}

.border-neonpink-shex {
  border-color: var(--shex-neonpink) !important;
}

/* ---------------------------------------------------------- */
/* Legacy 2px Thick Borders (From original code)              */
/* ---------------------------------------------------------- */
.border-purple {
  border: 2px solid var(--leg-brd-purple) !important;
}

.border-blue {
  border: 2px solid var(--leg-brd-blue) !important;
}

.border-emerald {
  border: 2px solid var(--leg-brd-emerald) !important;
}

.border-orange {
  border: 2px solid var(--leg-brd-orange) !important;
}

.border-red {
  border: 2px solid var(--leg-brd-red) !important;
}

/* ========================================================== */
/* 4. CUSTOM THEMED CARDS (SHEX PALETTE)                      */
/* Bulletproof Scoped Variable Injection for Background/Border*/
/* ========================================================== */

/* The Base Engine: Forces all borders and backgrounds to respect our injection */
.card-shex {
  /* Default fallback, overridden by the color classes below */
  --shex-card-base: transparent;
  border: 1px solid var(--shex-card-base) !important;
  /* 5% tint for the main card background. Perfectly overlays on Dark/Light body backgrounds */
  background-color: color-mix(in srgb, var(--shex-card-base) 5%, transparent) !important;
  transition: all 0.3s ease;
}

  .card-shex .card-header {
    font-weight: 600;
    color: var(--shex-card-base) !important;
    /* 15% tint for the header to create contrast against the 5% body */
    background-color: color-mix(in srgb, var(--shex-card-base) 15%, transparent) !important;
    border-bottom: 1px solid var(--shex-card-base) !important;
  }

/* --- The Color Modifiers (Injects the specific variable into the engine above) --- */
.card-shex-gold {
  --shex-card-base: var(--shex-gold);
}

.card-shex-silver {
  --shex-card-base: var(--shex-silver);
}

.card-shex-bronze {
  --shex-card-base: var(--shex-bronze);
}

.card-shex-red {
  --shex-card-base: var(--shex-red);
}

.card-shex-orange {
  --shex-card-base: var(--shex-orange);
}

.card-shex-yellow {
  --shex-card-base: var(--shex-yellow);
}

.card-shex-green {
  --shex-card-base: var(--shex-green);
}

.card-shex-teal {
  --shex-card-base: var(--shex-teal);
}

.card-shex-cyan {
  --shex-card-base: var(--shex-cyan);
}

.card-shex-blue {
  --shex-card-base: var(--shex-blue);
}

.card-shex-indigo {
  --shex-card-base: var(--shex-indigo);
}

.card-shex-purple {
  --shex-card-base: var(--shex-purple);
}

.card-shex-pink {
  --shex-card-base: var(--shex-pink);
}

.card-shex-lime {
  --shex-card-base: var(--shex-lime);
}

.card-shex-gray {
  --shex-card-base: var(--shex-gray);
}

.card-shex-white {
  --shex-card-base: var(--shex-white);
}

.card-shex-amber {
  --shex-card-base: var(--shex-amber);
}

.card-shex-apricot {
  --shex-card-base: var(--shex-apricot);
}

.card-shex-coral {
  --shex-card-base: var(--shex-coral);
}

.card-shex-salmon {
  --shex-card-base: var(--shex-salmon);
}

.card-shex-crimson {
  --shex-card-base: var(--shex-crimson);
}

.card-shex-ruby {
  --shex-card-base: var(--shex-ruby);
}

.card-shex-magenta {
  --shex-card-base: var(--shex-magenta);
}

.card-shex-fuchsia {
  --shex-card-base: var(--shex-fuchsia);
}

.card-shex-violet {
  --shex-card-base: var(--shex-violet);
}

.card-shex-lavender {
  --shex-card-base: var(--shex-lavender);
}

.card-shex-plum {
  --shex-card-base: var(--shex-plum);
}

.card-shex-grape {
  --shex-card-base: var(--shex-grape);
}

.card-shex-mint {
  --shex-card-base: var(--shex-mint);
}

.card-shex-emerald {
  --shex-card-base: var(--shex-emerald);
}

.card-shex-jade {
  --shex-card-base: var(--shex-jade);
}

.card-shex-olive {
  --shex-card-base: var(--shex-olive);
}

.card-shex-forest {
  --shex-card-base: var(--shex-forest);
}

.card-shex-turquoise {
  --shex-card-base: var(--shex-turquoise);
}

.card-shex-sky {
  --shex-card-base: var(--shex-sky);
}

.card-shex-azure {
  --shex-card-base: var(--shex-azure);
}

.card-shex-electric {
  --shex-card-base: var(--shex-electric);
}

.card-shex-steel {
  --shex-card-base: var(--shex-steel);
}

.card-shex-slate {
  --shex-card-base: var(--shex-slate);
}

.card-shex-charcoal {
  --shex-card-base: var(--shex-charcoal);
}

.card-shex-chocolate {
  --shex-card-base: var(--shex-chocolate);
}

.card-shex-copper {
  --shex-card-base: var(--shex-copper);
}

.card-shex-rosegold {
  --shex-card-base: var(--shex-rosegold);
}

.card-shex-peach {
  --shex-card-base: var(--shex-peach);
}

.card-shex-sand {
  --shex-card-base: var(--shex-sand);
}

.card-shex-ice {
  --shex-card-base: var(--shex-ice);
}

.card-shex-neon {
  --shex-card-base: var(--shex-neon);
}

.card-shex-neonpink {
  --shex-card-base: var(--shex-neonpink);
}

/* ========================================================== */
/* 5. CUSTOM BACKGROUNDS & SMART CONTRAST                     */
/* ========================================================== */

/* Define the baseline text contrast based on the theme */
:root, [data-bs-theme="light"] {
  /* Most light-mode custom colors are dark -> requires white text */
  --shex-contrast-text: #ffffff;
  /* Exceptions: These specific colors are light even in light mode */
  --shex-contrast-ice: #212529;
  --shex-contrast-sand: #212529;
}

[data-bs-theme="dark"] {
  /* Most dark-mode custom colors are pastel/light -> requires dark text */
  --shex-contrast-text: #212529;
  /* Keep the exceptions dark */
  --shex-contrast-ice: #212529;
  --shex-contrast-sand: #212529;
}

/* Background Utility Classes */
.bg-shex-gold {
  background-color: var(--shex-gold) !important;
  color: var(--shex-contrast-text) !important;
}

.bg-shex-silver {
  background-color: var(--shex-silver) !important;
  color: var(--shex-contrast-text) !important;
}

.bg-shex-bronze {
  background-color: var(--shex-bronze) !important;
  color: var(--shex-contrast-text) !important;
}

.bg-shex-red {
  background-color: var(--shex-red) !important;
  color: var(--shex-contrast-text) !important;
}

.bg-shex-orange {
  background-color: var(--shex-orange) !important;
  color: var(--shex-contrast-text) !important;
}

.bg-shex-yellow {
  background-color: var(--shex-yellow) !important;
  color: var(--shex-contrast-text) !important;
}

.bg-shex-green {
  background-color: var(--shex-green) !important;
  color: var(--shex-contrast-text) !important;
}

.bg-shex-teal {
  background-color: var(--shex-teal) !important;
  color: var(--shex-contrast-text) !important;
}

.bg-shex-cyan {
  background-color: var(--shex-cyan) !important;
  color: var(--shex-contrast-text) !important;
}

.bg-shex-blue {
  background-color: var(--shex-blue) !important;
  color: var(--shex-contrast-text) !important;
}

.bg-shex-indigo {
  background-color: var(--shex-indigo) !important;
  color: var(--shex-contrast-text) !important;
}

.bg-shex-purple {
  background-color: var(--shex-purple) !important;
  color: var(--shex-contrast-text) !important;
}

.bg-shex-pink {
  background-color: var(--shex-pink) !important;
  color: var(--shex-contrast-text) !important;
}

.bg-shex-lime {
  background-color: var(--shex-lime) !important;
  color: var(--shex-contrast-text) !important;
}

.bg-shex-gray {
  background-color: var(--shex-gray) !important;
  color: var(--shex-contrast-text) !important;
}

.bg-shex-white {
  background-color: var(--shex-white) !important;
  color: var(--shex-contrast-text) !important;
}

.bg-shex-amber {
  background-color: var(--shex-amber) !important;
  color: var(--shex-contrast-text) !important;
}

.bg-shex-apricot {
  background-color: var(--shex-apricot) !important;
  color: var(--shex-contrast-text) !important;
}

.bg-shex-coral {
  background-color: var(--shex-coral) !important;
  color: var(--shex-contrast-text) !important;
}

.bg-shex-salmon {
  background-color: var(--shex-salmon) !important;
  color: var(--shex-contrast-text) !important;
}

.bg-shex-crimson {
  background-color: var(--shex-crimson) !important;
  color: var(--shex-contrast-text) !important;
}

.bg-shex-ruby {
  background-color: var(--shex-ruby) !important;
  color: var(--shex-contrast-text) !important;
}

.bg-shex-magenta {
  background-color: var(--shex-magenta) !important;
  color: var(--shex-contrast-text) !important;
}

.bg-shex-fuchsia {
  background-color: var(--shex-fuchsia) !important;
  color: var(--shex-contrast-text) !important;
}

.bg-shex-violet {
  background-color: var(--shex-violet) !important;
  color: var(--shex-contrast-text) !important;
}

.bg-shex-lavender {
  background-color: var(--shex-lavender) !important;
  color: var(--shex-contrast-text) !important;
}

.bg-shex-plum {
  background-color: var(--shex-plum) !important;
  color: var(--shex-contrast-text) !important;
}

.bg-shex-grape {
  background-color: var(--shex-grape) !important;
  color: var(--shex-contrast-text) !important;
}

.bg-shex-mint {
  background-color: var(--shex-mint) !important;
  color: var(--shex-contrast-text) !important;
}

.bg-shex-emerald {
  background-color: var(--shex-emerald) !important;
  color: var(--shex-contrast-text) !important;
}

.bg-shex-jade {
  background-color: var(--shex-jade) !important;
  color: var(--shex-contrast-text) !important;
}

.bg-shex-olive {
  background-color: var(--shex-olive) !important;
  color: var(--shex-contrast-text) !important;
}

.bg-shex-forest {
  background-color: var(--shex-forest) !important;
  color: var(--shex-contrast-text) !important;
}

.bg-shex-turquoise {
  background-color: var(--shex-turquoise) !important;
  color: var(--shex-contrast-text) !important;
}

.bg-shex-sky {
  background-color: var(--shex-sky) !important;
  color: var(--shex-contrast-text) !important;
}

.bg-shex-azure {
  background-color: var(--shex-azure) !important;
  color: var(--shex-contrast-text) !important;
}

.bg-shex-electric {
  background-color: var(--shex-electric) !important;
  color: var(--shex-contrast-text) !important;
}

.bg-shex-steel {
  background-color: var(--shex-steel) !important;
  color: var(--shex-contrast-text) !important;
}

.bg-shex-slate {
  background-color: var(--shex-slate) !important;
  color: var(--shex-contrast-text) !important;
}

.bg-shex-charcoal {
  background-color: var(--shex-charcoal) !important;
  color: var(--shex-contrast-text) !important;
}

.bg-shex-chocolate {
  background-color: var(--shex-chocolate) !important;
  color: var(--shex-contrast-text) !important;
}

.bg-shex-copper {
  background-color: var(--shex-copper) !important;
  color: var(--shex-contrast-text) !important;
}

.bg-shex-rosegold {
  background-color: var(--shex-rosegold) !important;
  color: var(--shex-contrast-text) !important;
}

.bg-shex-peach {
  background-color: var(--shex-peach) !important;
  color: var(--shex-contrast-text) !important;
}

.bg-shex-neon {
  background-color: var(--shex-neon) !important;
  color: var(--shex-contrast-text) !important;
}

.bg-shex-neonpink {
  background-color: var(--shex-neonpink) !important;
  color: var(--shex-contrast-text) !important;
}

/* Exceptions mapped to their specific contrast variables */
.bg-shex-ice {
  background-color: var(--shex-ice) !important;
  color: var(--shex-contrast-ice) !important;
}

.bg-shex-sand {
  background-color: var(--shex-sand) !important;
  color: var(--shex-contrast-sand) !important;
}