:root {
  /* Primary Color Palette */
  --addgene-blue: rgb(0, 74, 214); /* 004ad6 */
  --addgene-dusk: rgb(1, 41, 158); /* 01299e */
  --addgene-dark-blue: rgb(22, 15, 68); /* 160f44 */
  --addgene-sky: rgb(77, 171, 255); /* 4dabff */
  --addgene-forest: rgb(0, 101, 78); /* 00654e */
  --addgene-green: rgb(78, 165, 40); /* 4ea528 */
  --addgene-lime: rgb(124, 195, 93); /* 7cc35d */
  --addgene-yellow: rgb(249, 207, 29); /* f9cf1d */
  --addgene-pink: rgb(255, 99, 103); /* ff6367 */
  --addgene-dark-blue-deep: rgb(36, 38, 60); /* 24263c - dark theme body bg */

  /* Typography & Color Palette include addgene-blue, addgene-dark-blue, white*/
  --addgene-brand-font-1: Encode Sans, Verdana, Helvetica, sans-serif;
  --addgene-brand-font-2: Roboto, Arial, Helvetica, sans-serif;
  --addgene-h1-h2-color: var(--addgene-dark-blue);
  --addgene-gray: rgb(88, 88, 88); /* 585858 */
  --addgene-text-dark: rgb(34, 34, 34); /* 222 */
  --addgene-text-dark-light-80: rgb(211, 211, 211); /* d3d3d3 */

  /* Neutral Color Palette */
  --addgene-neutral-yellow: rgb(245, 244, 240); /* f5f4f0 */
  --addgene-neutral-green: rgb(236, 244, 233); /* ecf4e9 */
  --addgene-neutral-blue: rgb(230, 247, 253); /* e6f7fd */
  --addgene-border-gray-1: rgb(204, 204, 204); /* ccc */
  --addgene-border-gray-2: rgb(221, 221, 221); /* ddd */
  --addgene-border-gray-3: rgb(238, 238, 238); /* eee */

  /* Use Sparingly */
  --addgene-orange: rgb(249, 160, 29); /* f9a01d */
  --addgene-red: rgb(238, 0, 36); /* ee0024 */
  --addgene-invalid-red: rgb(88, 21, 28); /* 58151c */
  --addgene-purple: rgb(86, 53, 111); /* 56356f */

  /* Addgene Grays — numbered aliases for cross-product parity with addgene-core */
  --addgene-gray-0: var(--addgene-neutral-yellow); /* f5f4f0 */
  --addgene-gray-1: var(--addgene-border-gray-3); /* eee */
  --addgene-gray-2: var(--addgene-border-gray-2); /* ddd */
  --addgene-gray-3: var(--addgene-border-gray-1); /* ccc */
  --addgene-gray-4: rgb(153, 153, 153); /* 999999 */
  --addgene-gray-5: var(--addgene-gray); /* 585858 */
  --addgene-gray-6: rgb(73, 80, 87); /* 495057 */
  --addgene-gray-7: var(--addgene-text-dark); /* 222 */

  /* Derived Colors */
  /*
  Note: --addgene-blue-light-60/80 are defined as rgb() values since they are referenced as bare numbers
  in --bs-*-rgb variables which Bootstrap requires.
  */
  --addgene-blue-light-60: rgb(153, 183, 239); /* 99b7ef - addgene-blue at 60% on white */
  --addgene-blue-light-80: rgb(204, 219, 247); /* ccdbf7 - addgene-blue at 80% on white */
  --addgene-page-hero-dark-bg: color-mix(in srgb, var(--addgene-dark-blue) 75%, black); /* 110b33 */
  --addgene-dark-blue-muted-border: color-mix(in srgb, var(--addgene-dark-blue) 50%, white); /* 8b87a2 */
  --addgene-dark-blue-subtle-border: color-mix(in srgb, var(--addgene-dark-blue) 90%, white); /* 2d2757 */
  --addgene-link-hover-on-dark-blue: rgba(var(--bs-info-rgb), 0.8); /* ccdbf7 at 80% opacity */
  --addgene-yellow-btn-hover: color-mix(in srgb, var(--addgene-yellow) 95%, black); /* edc51c */

  /* Forms */
  --addgene-form-invalid-icon: url("data:image/svg+xml,%3Csvg%20width%3D%2255%22%20height%3D%2255%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle%20cx%3D%2227.5%22%20cy%3D%2227.5%22%20r%3D%2225.5%22%20fill%3D%22%2358151c%22%20stroke%3D%22%2358151c%22%20stroke-width%3D%224%22%2F%3E%3Cpath%20d%3D%22M26.962%2011.017c-.068.014-.298.068-.509.122-1.907.479-3.453%202.316-3.453%204.09%200%20.225.108%201.241.245%202.253.132%201.011.552%204.187.929%207.066.983%207.5.973%207.412%201.056%207.725.206.806.69%201.451%201.326%201.764.328.161.42.186.822.2.743.035%201.203-.146%201.702-.664.484-.513.705-1.095.861-2.268l.543-4.109c.24-1.847.64-4.867.88-6.719.245-1.847.49-3.694.543-4.105.118-.889.123-1.49.02-1.89-.401-1.579-1.761-2.928-3.39-3.353-.367-.098-1.301-.161-1.575-.112zM27.12%2038.109c-1.688.215-2.906%201.813-2.7%203.547.097.812.42%201.471.997%202.004.558.523%201.16.782%201.912.83.915.054%201.644-.229%202.324-.913.655-.655.94-1.334.944-2.272.005-.567-.064-.895-.284-1.368-.587-1.276-1.854-2-3.194-1.828z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");

  /* Alert state colors */
  --addgene-state-success-bg: var(--addgene-neutral-green);
  --addgene-state-success-text: rgb(10, 54, 34); /* 0a3622 */
  --addgene-state-warning-bg: rgb(255, 245, 219); /* fff5db */
  --addgene-state-warning-text: rgb(102, 77, 3); /* 664d03 */
  --addgene-state-danger-bg: rgb(249, 225, 227); /* f9e1e3 */
  --addgene-state-danger-text: var(--addgene-invalid-red);
  --addgene-state-info-bg: rgb(214, 228, 252); /* d6e4fc */
  --addgene-state-info-text: rgb(5, 44, 101); /* 052c65 */

  /* BS5 alert subtle */
  --addgene-alert-primary-text-emphasis: rgb(0, 34, 72); /* 002248 */
  --addgene-alert-primary-bg-subtle: rgb(219, 238, 255); /* dbeeff */
  --addgene-alert-secondary-text-emphasis: rgb(43, 47, 50); /* 2b2f32 */
  --addgene-alert-secondary-bg-subtle: var(--addgene-gray-0);
  --addgene-alert-light-text-emphasis: var(--addgene-gray-6);
  --addgene-alert-light-bg-subtle: rgb(244, 244, 244); /* f4f4f4 */
  --addgene-alert-dark-text-emphasis: var(--addgene-gray-6);
  --addgene-alert-dark-bg-subtle: rgb(206, 212, 218); /* ced4da */

  /* Bootstrap 5 variables */
  --bs-primary: var(--addgene-blue);
  --bs-primary-rgb: 0, 74, 214; /* addgene-blue */
  --bs-secondary: var(--addgene-gray);
  --bs-secondary-rgb: 88, 88, 88; /* addgene-gray */
  --bs-secondary-color: var(--addgene-gray-3); /* used for .text-muted */
  --bs-success: var(--addgene-forest);
  --bs-success-rgb: 0, 101, 78; /* addgene-forest */
  --bs-danger: var(--addgene-pink);
  --bs-danger-rgb: 255, 99, 103; /* addgene-pink */
  --bs-warning: var(--addgene-yellow);
  --bs-warning-rgb: 249, 207, 29; /* addgene-yellow */
  --bs-info: var(--addgene-blue-light-80);
  --bs-info-rgb: 204, 219, 247; /* addgene-blue-light-80 */
  --bs-light: var(--addgene-border-gray-1);
  --bs-light-rgb: 204, 204, 204; /* addgene-border-gray-1 */
  --bs-dark: var(--addgene-gray-7);
  --bs-dark-rgb: 34, 34, 34; /* addgene-text-dark */
  --bs-link-color-rgb: 0, 74, 214; /* addgene-blue */
  --bs-link-hover-color-rgb: 1, 41, 158; /* addgene-dusk */
  --bs-font-sans-serif: var(--addgene-brand-font-2);
  --bs-font-monospace: monospace;
  --bs-body-line-height: 1.7;
  --bs-body-color: var(--addgene-gray);
  --bs-body-color-rgb: var(--bs-secondary-rgb); /* addgene-gray */
  --bs-focus-ring-width: 0.25rem;
  --bs-focus-ring-opacity: 1;
  --bs-focus-ring-color: var(--bs-primary); /* addgene-blue */
  --bs-form-invalid-color: var(--bs-danger-text-emphasis);
  --bs-form-invalid-border-color: var(--bs-danger-text-emphasis);
  --bs-border-color: var(--addgene-gray-3);
  --bs-navbar-color: #fff;
  --bs-navbar-brand-font-size: 1.5rem;

  /* Alert color overrides */
  --bs-success-text-emphasis: var(--addgene-state-success-text);
  --bs-success-bg-subtle: var(--addgene-state-success-bg);
  --bs-success-border-subtle: color-mix(in srgb, var(--addgene-state-success-bg) 70%, var(--addgene-state-success-text));

  --bs-warning-text-emphasis: var(--addgene-state-warning-text);
  --bs-warning-bg-subtle: var(--addgene-state-warning-bg);
  --bs-warning-border-subtle: color-mix(in srgb, var(--addgene-state-warning-bg) 70%, var(--addgene-state-warning-text));

  --bs-danger-text-emphasis: var(--addgene-state-danger-text);
  --bs-danger-bg-subtle: var(--addgene-state-danger-bg);
  --bs-danger-border-subtle: color-mix(in srgb, var(--addgene-state-danger-bg) 70%, var(--addgene-state-danger-text));

  --bs-info-text-emphasis: var(--addgene-state-info-text);
  --bs-info-bg-subtle: var(--addgene-state-info-bg);
  --bs-info-border-subtle: color-mix(in srgb, var(--addgene-state-info-bg) 70%, var(--addgene-state-info-text));

  --bs-primary-text-emphasis: var(--addgene-alert-primary-text-emphasis);
  --bs-primary-bg-subtle: var(--addgene-alert-primary-bg-subtle);
  --bs-primary-border-subtle: color-mix(in srgb, var(--addgene-alert-primary-bg-subtle) 70%, var(--addgene-alert-primary-text-emphasis));

  --bs-secondary-text-emphasis: var(--addgene-alert-secondary-text-emphasis);
  --bs-secondary-bg-subtle: var(--addgene-alert-secondary-bg-subtle);
  --bs-secondary-border-subtle: color-mix(in srgb, var(--addgene-alert-secondary-bg-subtle) 70%, var(--addgene-alert-secondary-text-emphasis));

  --bs-light-text-emphasis: var(--addgene-alert-light-text-emphasis);
  --bs-light-bg-subtle: var(--addgene-alert-light-bg-subtle);
  --bs-light-border-subtle: color-mix(in srgb, var(--addgene-alert-light-bg-subtle) 70%, var(--addgene-alert-light-text-emphasis));

  --bs-dark-text-emphasis: var(--addgene-alert-dark-text-emphasis);
  --bs-dark-bg-subtle: var(--addgene-alert-dark-bg-subtle);
  --bs-dark-border-subtle: color-mix(in srgb, var(--addgene-alert-dark-bg-subtle) 70%, var(--addgene-alert-dark-text-emphasis));
}

[data-bs-theme="dark"] {
  --bs-body-bg: var(--addgene-dark-blue-deep);
  --bs-body-color: var(--addgene-text-dark-light-80);
  --bs-body-color-rgb: 211, 211, 211; /* addgene-text-dark-light-80 */
  --bs-accordion-bg: var(--addgene-dark-blue);
  --bs-link-color-rgb: 204, 219, 247; /* addgene-blue-light-80 */
  --bs-link-hover-color-rgb: 153, 183, 239; /* addgene-blue-light-60 */
  --bs-secondary: var(--addgene-gray);
  --bs-border-color: var(--addgene-gray-3);
  --bs-form-invalid-color: var(--bs-danger);
  --bs-form-invalid-border-color: var(--bs-danger);
  --addgene-form-invalid-icon: url("data:image/svg+xml,%3Csvg%20width%3D%2255%22%20height%3D%2255%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle%20cx%3D%2227.5%22%20cy%3D%2227.5%22%20r%3D%2225.5%22%20stroke%3D%22%23ff6367%22%20stroke-width%3D%224%22%20style%3D%22fill%3A%23ff6367%3Bpaint-order%3Afill%22%2F%3E%3Cpath%20d%3D%22M26.962%2011.017c-.068.014-.298.068-.509.122-1.907.479-3.453%202.316-3.453%204.09%200%20.225.108%201.241.245%202.253.132%201.011.552%204.187.929%207.066.983%207.5.973%207.412%201.056%207.725.206.806.69%201.451%201.326%201.764.328.161.42.186.822.2.743.035%201.203-.146%201.702-.664.484-.513.705-1.095.861-2.268l.543-4.109c.24-1.847.64-4.867.88-6.719.245-1.847.49-3.694.543-4.105.118-.889.123-1.49.02-1.89-.401-1.579-1.761-2.928-3.39-3.353-.367-.098-1.301-.161-1.575-.112zm.158%2027.092c-1.688.215-2.906%201.813-2.7%203.547.097.812.42%201.471.997%202.004a2.92%202.92%200%200%200%201.912.83c.915.054%201.644-.229%202.324-.913.655-.655.94-1.334.944-2.272.005-.567-.064-.895-.284-1.368-.587-1.276-1.854-2-3.194-1.828z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");

  .offcanvas,
  .offcanvas-xxl,
  .offcanvas-xl,
  .offcanvas-lg,
  .offcanvas-md,
  .offcanvas-sm {
    --bs-offcanvas-bg: var(--addgene-dark-blue);
  }

  .card {
    --bs-card-border-color: var(--bs-border-color-translucent);
  }
}

.btn-primary {
  --bs-btn-bg: var(--addgene-blue);
  --bs-btn-border-color: var(--addgene-blue);
  --bs-btn-hover-bg: var(--addgene-dusk);
  --bs-btn-hover-border-color: var(--addgene-dusk);
}

.btn-check:checked + .btn,
:not(.btn-check) + .btn:active,
.btn:first-child:active,
.btn.active,
.btn.show {
  color: var(--bs-secondary);
  background-color: #fff;
  border-color: #fff;
}

.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-disabled-color: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}

[data-bs-theme="dark"] .btn-outline-primary {
  --bs-btn-color: var(--addgene-blue-light-80);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--addgene-blue-light-80);
  --bs-btn-hover-color: var(--bs-body-bg);
  --bs-btn-hover-bg: var(--addgene-blue-light-80);
  --bs-btn-hover-border-color: var(--addgene-blue-light-80);
  --bs-btn-active-color: #fff;
}

.btn-outline-secondary {
  --bs-btn-color: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-bg: var(--bs-secondary);
  --bs-btn-hover-border-color: var(--bs-secondary);
  --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
  --bs-btn-active-bg: var(--bs-secondary);
  --bs-btn-active-border-color: var(--bs-secondary);
  --bs-btn-disabled-color: var(--bs-secondary);
  --bs-btn-disabled-border-color: var(--bs-secondary);
}

[data-bs-theme="dark"] .btn-outline-secondary {
  --bs-btn-color: #fff;
  --bs-btn-border-color: #fff;
  --bs-btn-hover-color: var(--bs-secondary);
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: #fff;
  --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-secondary);
  --bs-btn-active-border-color: var(--bs-secondary);
}

.nav-item .btn-outline-secondary {
  --bs-btn-color: #fff;
  --bs-btn-border-color: #fff;
  --bs-btn-hover-color: var(--bs-secondary);
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: #fff;
  --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #fff;
  --bs-btn-active-border-color: #fff;
}

.btn-yellow {
  --bs-btn-color: var(--addgene-gray-7);
  --bs-btn-bg: var(--addgene-yellow);
  --bs-btn-border-color: var(--addgene-yellow);
  --bs-btn-hover-color: var(--addgene-gray-7);
  --bs-btn-hover-bg: var(--addgene-yellow-btn-hover);
  --bs-btn-hover-border-color: var(--addgene-yellow-btn-hover);
  --bs-btn-active-color: var(--addgene-gray-7);
  --bs-btn-active-bg: var(--addgene-yellow-btn-hover);
  --bs-btn-active-border-color: var(--addgene-yellow-btn-hover);
  --bs-btn-focus-shadow-rgb: var(--bs-warning-rgb);
  --bs-btn-disabled-color: var(--addgene-gray-7);
  --bs-btn-disabled-bg: var(--addgene-yellow);
  --bs-btn-disabled-border-color: var(--addgene-yellow);
}

.nav-link {
  --bs-nav-link-color: #fff;
  --bs-nav-link-hover-color: var(--addgene-link-hover-on-dark-blue);
}

.dropdown-menu {
  --bs-dropdown-border-color: var(--bs-border-color);
  --bs-dropdown-link-hover-bg: var(--bs-secondary-bg-subtle);
}

[data-bs-theme="dark"] {
  .dropdown-menu {
    --bs-dropdown-border-color: var(--bs-dropdown-divider-bg);
    --bs-dropdown-link-hover-bg: var(--bs-dropdown-divider-bg);
  }
}

.offcanvas,
.offcanvas-xxl,
.offcanvas-xl,
.offcanvas-lg,
.offcanvas-md,
.offcanvas-sm {
  --bs-offcanvas-bg: var(--addgene-gray-0);
}

.alert {
  --bs-alert-border-color: transparent;
}

[data-bs-theme="dark"] .alert .btn-close {
  filter: none;
}

.card {
  --bs-card-border-color: var(--addgene-gray-2);
}

.card-body {
  --bs-card-spacer-y: 1.875rem;
  --bs-card-spacer-x: 1.875rem;
}