:root {
   /* Primary Hue: 188 */
   --bs-primary: #00aac8;
   --bs-primary-rgb: 0, 170, 200;
   /* Secondary - Desaturated version of primary */
   --bs-secondary: #7faeb6;
   --bs-secondary-rgb: 127, 174, 182;
   /* Success - Bright/Lighter version of primary */
   --bs-success: #66e0f5;
   --bs-success-rgb: 102, 224, 245;
   /* Info - The original primary (vibrant) */
   --bs-info: #00aac8;
   --bs-info-rgb: 0, 170, 200;
   /* Warning - Muted/Medium version of primary */
   --bs-warning: #007a90;
   --bs-warning-rgb: 0, 122, 144;
   /* Danger - Dark version of primary */
   --bs-danger: #911f29;
   --bs-danger-rgb: 145, 31, 41;
   /* Light and Dark */
   --bs-light: #f0f8fa;
   --bs-light-rgb: 240, 248, 250;
   --bs-dark: #002b33;
   --bs-dark-rgb: 0, 43, 51;
   /* Update Button & Link states to match primary */
   --bs-primary-bg-subtle: #ccf1f7;
   --bs-primary-border-subtle: #99e3ef;
   --bs-primary-text-emphasis: #006678;
   /* 1. Base State - Your Primary Hue */
   --bs-link-color: #00aac8;
   --bs-link-color-rgb: 0, 170, 200;
   /* 2. Hover State - 15% Darker */
   --bs-link-hover-color: #008299;
   --bs-link-hover-color-rgb: 0, 130, 153;
   /* 3. Active/Pressed State - 30% Darker */
   --bs-link-active-color: #005564;
   /* 4. Visited State - Muted/Desaturated version of the hue */
   /* This helps users see where they have already been */
   --bs-link-visited-color: #6198a2;
   /* 5. Focus State - Uses a glow (box-shadow) based on primary rgb */
   --bs-link-focus-shadow-rgb: 0, 170, 200;
   /* Form Focus State */
   --bs-focus-ring-color: rgba(0, 170, 200, 0.25);
   --bs-form-control-focus-border-color: #80d5e3; /* Lightened version of #00aac8 */
   /* Checkboxes and Radios */
   --bs-form-check-input-checked-bg-color: #00aac8;
   --bs-form-check-input-checked-border-color: #00aac8;
   --bs-form-check-input-focus-border-color: #80d5e3;
   --bs-form-check-input-focus-box-shadow: 0 0 0 0.25rem rgba(0, 170, 200, 0.25);
}

/* Customizing the Primary Button specifically for hover states */
.btn-primary {
   --bs-btn-bg: #00aac8;
   --bs-btn-border-color: #00aac8;
   --bs-btn-hover-bg: #008fa8;
   --bs-btn-hover-border-color: #008fa8;
   --bs-btn-active-bg: #007a90;
}

.btn-dark {
   --bs-btn-bg: var(--bs-dark);
   --bs-btn-border-color: var(--bs-dark);
   --bs-btn-hover-bg: #001b16;
   --bs-btn-hover-border-color: #001b16;
}

.btn-outline-primary {
   --bs-btn-color: #00aac8;
   --bs-btn-border-color: #00aac8;
   --bs-btn-hover-bg: #00aac8;
   --bs-btn-hover-border-color: #00aac8;
}

/* Handle Bootstrap's "Icon Links" and helper classes */
.link-primary {
   --bs-link-color-rgb: 0, 170, 200;
   --bs-link-hover-color-rgb: 0, 130, 153;
}

/* Specific overrides for focus states that ignore the root variables */
.form-control:focus {
   color: #212529;
   background-color: #fff;
   border-color: var(--bs-form-control-focus-border-color);
   outline: 0;
   box-shadow: var(--bs-form-check-input-focus-box-shadow);
}

.form-check-input:checked {
   background-color: var(--bs-form-check-input-checked-bg-color);
   border-color: var(--bs-form-check-input-checked-border-color);
}

.form-check-input:focus {
   border-color: var(--bs-form-check-input-focus-border-color);
   box-shadow: var(--bs-form-check-input-focus-box-shadow);
}

/* Range Sliders */
.form-range::-webkit-slider-thumb {
   background-color: #00aac8;
}

   .form-range::-webkit-slider-thumb:active {
      background-color: #005564;
   }

:root {
   --reco-a-color: #198754;
   --reco-b-color: #ced4da;
   --reco-c-color: #ffc107;
   --reco-d-color: #dc3545;
   --reco-a-color-light: #19875480;
   --reco-b-color-light: #ced4da80;
   --reco-c-color-light: #ffc10780;
   --reco-d-color-light: #dc354580;
   --reco-a-background-color: #19875410;
   --reco-b-background-color: #ced4da10;
   --reco-c-background-color: #ffc10710;
   --reco-d-background-color: #dc354510;
}