@media screen {
  :root { /* auto */
    color-scheme: light dark;
    background-color: var(--bs-body-bg);
  }
  :root[data-bs-theme="light"] {
    color-scheme: light;
  }
  :root[data-bs-theme="dark"] {
    color-scheme: dark;
  }
  [data-bs-theme="dark"] img {
    filter: brightness(80%);
  }
  [data-bs-theme="dark"] img:hover,
  [data-bs-theme="dark"] img:focus {
    filter: brightness(100%);
  }
  /* et voila. */
}

:root {
  /* Greys */
  --black-rgb: 0,0,0;
  --white-rgb: 255,255,255;
  --bs-black-rgb: 0,0,0;
  --bs-gray-dark: var(--bs-gray-800);

  --bs-gray-100: #f8f9fa;
  --bs-gray-110: #f4f5f6;
  --bs-gray-125: #f9f0fa;
  --bs-gray-150: #eceeef;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-550: #8d959d;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-750: #3F454C;
  --bs-gray-800: #343a40;
  --bs-gray-850: #2B3035;
  --bs-gray-900: #212529;
  --bs-gray-925: #1B1D1F;
  --bs-gray-950: #151515;
  --bs-gray-975: #090909;
  --bs-gray: var(--bs-gray-600);

  /* Yellows */ 
  --bs-yellow-900: #332701;
  --bs-yellow-800: #664D03;
  --bs-yellow-700: #997404;
  --bs-yellow-625: #bb8402;   /* custom blend between 600 and 700 */
  --bs-yellow-600: #CC9A06;
  --bs-yellow-550: #FFC266;   /* custom blend between 500 and 600 */
  --bs-yellow-500: #ffc107;
  --bs-yellow-400: #ffcd39;
  --bs-yellow-400-rgba: 255, 205, 57; /* use at 50% alpha */
  --bs-yellow-300: #FFDA6A;
  --bs-yellow-250: #FFE1A8;   /* custom blend between 200 and 300 */
  --bs-yellow-200: #ffe69c;
  --bs-yellow-100: #fff3cd;
  --bs-yellow-050: #EEEEDD;   /* custom blend */
  --bs-yellow-025: #FFFFEE;   /* custom blend */

  /* Orange */
  --bs-orange-rgb: 253, 126, 20;
  --bs-orange-100: #FFE5D0;
  --bs-orange-600: #CA6510;
  --bs-orange-700: #984C0C;
  --bs-orange-750: #723809;  /* custom blend between 700 and 800 */
  --bs-orange-800: #653208;

  /* Greens */
  /* We mostly don't use Bootstrap's scale here since our brand is similar */
  --evergreen: var(--eg-green-600); /* brand color */
  --evergreen-rgb: 13, 119, 100;
  /* blend from #ffc to #0d7764 (midpoint, 5 steps) to #062219 (4 steps) */
  --eg-green-050: #D7E890;
  --eg-green-100: #D3E7BE;
  --eg-green-200: #ABD1AC;
  --eg-green-300: #84BA9A;
  --eg-green-400: #5CA488;
  --eg-green-500: #358D76;
  --eg-green-600: #0d7764;
  --eg-green-700: #0B6251;
  --eg-green-800: #0A4D3F;
  --eg-green-900: #08372C;
  --eg-green-950: #062219;

  --bs-green-100: #D1E7DD;
  --bs-green-200: #A3CFBB;
  --bs-green-300: #75B798;
  --bs-green-400: #479F76;
  --bs-green-500: #198754;
  --bs-green-500-rgb: 13, 119, 100;
  --bs-green-rgb: 13, 119, 100;
  --bs-green-600: #146C43;
  --bs-green-700: #0F5132;
  --bs-green-800: #0A3622;
  --bs-green-900: #051B11;
  --bs-green-950: #030E09;

  /* Cyan */
  --bs-cyan-900: #032830;
  --bs-cyan-800: #055160;
  --bs-cyan-750: #076376; /*custom blend between 700 and 800 */
  --bs-cyan-750-rgb: 7, 99, 118;
  --bs-cyan-700: #087990;
  --bs-cyan-700-rgb: 8,121,144;
  --bs-cyan-700-disabled: #47838f;   /* desaturated */
  --bs-cyan-700-disabled-rgb: 71, 131, 143;
  --bs-cyan-600: #0AA2C0;
  --bs-cyan-500: #0DCAF0;
  --bs-cyan-400: #3DD5F3;
  --bs-cyan-300: #6EDFF6;
  --bs-cyan-200: #9EEAF9;
  --bs-cyan-100: #cff4fc;
  --bs-cyan-050: #add8e6;   /* custom blend */
  --bs-info-rgb: var(--bs-cyan-700-rgb);
  
  /* Blues */
  --bs-blue-050: #E7F1FF; /* custom blend */
  --bs-blue-100: #CFE2FF;
  --bs-blue-125: #b8daff;
  --bs-blue-150: #B3D9FF; /* custom blend */
  --bs-blue-200: #9EC5FE;
  --bs-blue-250: #86B7FE; /* custom blend */
  --bs-blue-300: #6ea8fe;
  --bs-blue-300-rgb: 110, 168, 254;
  --bs-blue-400: #3D8BFD;
  --bs-blue-500: #0D6EFD;
  --bs-blue-550: #0C63E4;
  --bs-blue-600: #0A58CA;
  --bs-blue-600-rgb: 10,88,202;
  --bs-blue-650: #0848a5; /* custom blend between 600 and 700 */
  --bs-blue-650-rgb: 8, 72, 165;
  --bs-blue-700: #084298;
  --bs-blue-800: #052C65;
  --bs-blue-850: #04214C;
  --bs-blue-900: #031633;
  --bs-blue-900-desat: #212529;
  --bs-blue-950: #020B1A;
  
  /* Purples */
  --eg-purple: #C99DFF; 
  --bs-purple-100: #E2D9F3;
  --bs-purple-800: #2C1A4D;

  /* Reds */
  --bs-red-rgb: 220,53,69;

  --bs-red-900: #2C0B0E;
  --bs-red-800: #58151c;
  --bs-red-700: #842029;
  --bs-red-600: #B02A37;
  --bs-red-500: #DC3545;
  --bs-red-400: #E35D6A;
  --bs-red-300: #EA868F;
  --bs-red-200: #F1AFB5;
  --bs-red-100: #f8d7da;


  /**********************/
  /*    LIGHT MODE      */
  /**********************/
  --black: black;
  --white: white;
  --bs-white: white;
  --bs-light: var(--bs-gray-100);
  --bs-dark: var(--bs-gray-900);
  --border: var(--bs-gray-300);
  --border-thick: var(--bs-gray-400);
  --inactive: var(--bs-gray-800);
  --form-control-border: var(--bs-gray-500);
  --form-check-border: var(--bs-gray-300);

  --bs-body-color: var(--bs-gray-900);
  --bs-body-color-rgb: 33, 37, 41;
  --bs-body-bg: white;
  --bs-body-color-disabled: var(--bs-dropdown-link-disabled-color);
  --bs-body-bg-alt: var(--bs-gray-110);
  --bs-body-bg-highlight: var(--bs-gray-200);
  --bs-text-highlight: var(--bs-gray-700);
  --bs-card-bg: var(--bs-gray-125);
  --bs-row-alt: rgba(var(--bs-black-rgb), 0.03);
  --box-shadow: var(--black-rgb);
  --border-print: #aaa;

  --success: var(--bs-green-500);
  --success-color: white;
  --success-hover-color: var(--eg-green-100);
  --success-border: #00593d;
  --success-hover: #157146; 
  --success-disabled: #448768; /* desaturated */
  --success-disabled-rgb: 68, 135, 104;
  --success-text-light: #dff0d8;
  --success-text-light-rgb: 223, 240, 216;
  --success-text-dark: #003b35;

  --form-success-bg: var(--bs-green-100);
  /* used in both nav and splash components: */
  --staff-navbar-a: var(--eg-green-800);
  --staff-navbar-b: var(--eg-green-600);

  --badge-color: var(--bs-blue-800);
  --badge-bg: var(--bs-blue-100); 

  --badge-danger-bg: var(--bs-red-100); 
  --badge-danger-selected-bg: var(--bs-red-200);
  --badge-danger-color: var(--bs-red-800);

  --badge-info-color: var(--bs-cyan-900); 
  --badge-info-bg: var(--bs-cyan-100);
  --badge-info-border: var(--bs-cyan-300);

  --badge-success-color: var(--success-text-dark); 
  --badge-success-bg: var(--success-text-light);

  --badge-warning-bg: var(--bs-yellow-200); 
  --badge-warning-hover-bg: var(--bs-yellow-300); 
  --badge-warning-selected-bg: var(--bs-yellow-300); 
  --badge-warning-color: var(--bs-orange-750); 

  --batch-item-attr-header-bg: var(--bs-blue-100);

  --grid-color: var(--bs-body-color);
  --grid-borders: rgba(0,0,0,0.125);
  --grid-filter-active: var(--bs-blue-900-desat);
  --grid-header-row: var(--bs-gray-100);
  --grid-header-button: var(--bs-blue-700);
  --grid-row-selected: #004085; 
  --grid-row-selected-bg: var(--bs-blue-100);
  --grid-row-selected-border: var(--bs-blue-125);
  --row-even-bg: var(--bs-body-bg-alt);
  --modal-header-color: white;
  --modal-header-bg: var(--bs-cyan-800);

  --danger: var(--bs-red-600);
  --danger-bg-hover: var(--bs-red-700);
  --danger-color: var(--bs-red-700);
  --danger-border: var(--bs-red-700);
  --destroy-color: var(--bs-red-600);
  --info: var(--bs-cyan-700); 
  --info-border: var(--bs-cyan-300); 
  --info-disabled: rgba(var(--bs-cyan-700-disabled-rgb), 1);
  --info-hover: var(--bs-cyan-200); 
  --primary: var(--bs-blue-600); 
  --primary-border: var(--bs-blue-650);
  --primary-focus-outline-rgb: var(--bs-blue-600-rgb);
  --primary-hover: var(--bs-blue-650);
  --primary-disabled: rgba(var(--bs-blue-600-rgb), 1);
  
  --warning-color: var(--bs-yellow-500);
  --warning-border: var(--bs-yellow-625);
  --warning-border-hover: var(--bs-yellow-500);
  --warning-shadow: rgba(var(--bs-yellow-400-rgba), 0.5);

  --secondary-bg: var(--bs-gray-300);
  --btn-gray-bg: var(--bs-gray-200);
  --btn-gray-bg-hover: var(--bs-gray-300);
  --btn-gray-color: var(--bs-body-color);
  --btn-gray-border: var(--bs-gray-400);
  
  --row-even-bg: var(--bs-body-bg-alt);
  --modal-header-color: white;
  --modal-header-bg: var(--bs-cyan-800);
  --modal-body-bg: var(--bs-body-bg);
  --popover-menu-hover: var(--bs-gray-100);
  --popover-header-bg: var(--bs-gray-100);
  --dropdown-menu-bg: white;

  --status-archived: var(--bs-gray-600);
  --star-stroke: var(--bs-yellow-700);
}


/**********************/
/*      DARK MODE     */
/**********************/
:root[data-bs-theme="dark"] {
  --black: white;
  --white: black;
  --bs-white: black;
  --bs-light: var(--bs-gray-850);
  --bs-dark: var(--bs-gray-100);
  --border: var(--bs-gray-700);
  --border-thick: var(--bs-gray-600);
  --inactive: var(--bs-gray-400);
  --form-control-border: var(--bs-gray-700);
  --form-check-border: var(--bs-gray-800);

  --bs-body-color: var(--bs-gray-400);
  --bs-body-color-rgb: 222, 226, 230;
  --bs-body-bg: var(--bs-gray-925);
  --bs-body-color-disabled: var(--bs-dropdown-link-disabled-color);
  --bs-body-bg-alt: var(--bs-gray-900);
  --bs-body-bg-highlight: var(--bs-gray-850);
  --bs-text-highlight: var(--bs-gray-500);
  --bs-card-bg: var(--bs-gray-925);

  --evergreen: var(--eg-green-200); /* brand color */

  --success: #002C1F;
  --success-color: var(--eg-green-100);
  --success-hover-color: var(--eg-green-050);
  --success-border: #157146;
  --success-hover: #00593d; 
  --success-disabled: #779788; /* desaturated */
  --success-disabled-rgb: 68, 135, 104;
  --success-text-light: #003b35;
  --success-text-light-rgb: 223, 240, 216;
  --success-text-dark: #dff0d8;

  --form-success-bg: var(--eg-green-900);
  /* used in both nav and splash components: */
  --staff-navbar-a: var(--bs-gray-900);
  --staff-navbar-b: var(--bs-gray-975);

  --badge-color: var(--bs-blue-200); 
  --badge-bg: var(--bs-blue-900); 

  --badge-danger-bg: var(--bs-red-800); 
  --badge-danger-selected-bg: var(--bs-red-700);
  --badge-danger-color: var(--bs-red-200);

  --badge-info-color: var(--bs-cyan-100); 
  --badge-info-bg: var(--bs-cyan-900);
  --badge-info-border: var(--bs-cyan-700);

  --badge-success-color: var(--success-text-dark); 
  --badge-success-bg: var(--success-text-light);

  --badge-warning-bg: var(--bs-yellow-800); 
  --badge-warning-hover-bg: var(--bs-yellow-900); 
  --badge-warning-selected-bg: var(--bs-yellow-700); 
  --badge-warning-color: var(--bs-yellow-200); 

  --batch-item-attr-header-bg: var(--bs-blue-900-desat);

  --grid-color: var(--bs-body-color);
  --grid-borders: #292929;

  --grid-filter-active: var(--bs-gray-900);
  --grid-header-row: var(--bs-gray-050);
  
  --grid-row-selected: var(--bs-blue-100); 
  --grid-row-selected-bg: var(--bs-blue-900);
  --grid-row-selected-border: var(--bs-blue-800);

  --grid-header-button: var(--bs-blue-300);

  --danger: var(--bs-red-800);
  --danger-bg-hover: var(--bs-red-700);
  --danger-color: var(--bs-red-300);
  --danger-border: var(--bs-red-600);
  --destroy-color: var(--bs-red-200);
  --info: var(--bs-cyan-300); 
  --info-border: var(--bs-cyan-700); 
  --info-disabled: rgba(var(--bs-cyan-700-disabled-rgb), 1);
  --info-hover: var(--bs-cyan-750); 
  --primary: var(--bs-blue-300); 
  --primary-border: var(--bs-blue-400);
  --primary-focus-outline-rgb: var(--bs-blue-600-rgb);
  --primary-hover: var(--bs-blue-400);
  --primary-disabled: rgba(var(--bs-blue-300-rgb), 0.6);
  
  --warning-color: var(--bs-yellow-200);
  --warning-border: var(--bs-yellow-400);
  --warning-border-hover: var(--bs-yellow-500);
  --warning-shadow: var(--eg-yellow-2);

  --secondary-bg: var(--bs-gray-700);
  --btn-gray-bg: var(--bs-gray-900);
  --btn-gray-bg-hover: var(--bs-gray-800);
  --btn-gray-color: var(--bs-body-color);
  --btn-gray-border: var(--bs-gray-800);
  
  --row-even-bg: var(--bs-body-bg-alt);
  --modal-header-color: white;
  --modal-header-bg: var(--bs-cyan-800);
  --modal-body-bg: var(--bs-body-bg-alt);
  --popover-menu-hover: var(--bs-gray-900);
  --popover-header-bg: var(--bs-gray-900);
  --dropdown-menu-bg: var(--bs-gray-900);

  --status-archived: var(--bs-gray-500);
  --star-stroke: transparent;
}
