:root {
  --collection-red-light: #B83232;
  --collection-red-dark: #EF6A63;
  --collection-orange-light: #C05A14;
  --collection-orange-dark: #F59E42;
  --collection-yellow-light: #A66F00;
  --collection-yellow-dark: #F2C94C;
  --collection-light-blue-light: #2A78A6;
  --collection-light-blue-dark: #72B7D9;
  --collection-blue-light: #245A9A;
  --collection-blue-dark: #6A9FDB;
  --collection-olive-light: #68752C;
  --collection-olive-dark: #A7B65C;
  --collection-green-light: #347A45;
  --collection-green-dark: #6AB47D;
  --collection-teal-light: #24756D;
  --collection-teal-dark: #62B3AA;
  --collection-brown-light: #755140;
  --collection-brown-dark: #AE826C;
  --collection-grey-light: #646B70;
  --collection-grey-dark: #AAB2B8;
  --collection-cyan-light: #1F7F8C;
  --collection-cyan-dark: #65C1CC;
  --collection-indigo-light: #4A4F92;
  --collection-indigo-dark: #8589C7;

  /* Active values for light appearance. */
  --collection-red: #B83232;
  --collection-orange: #C05A14;
  --collection-yellow: #A66F00;
  --collection-light-blue: #2A78A6;
  --collection-blue: #245A9A;
  --collection-olive: #68752C;
  --collection-green: #347A45;
  --collection-teal: #24756D;
  --collection-brown: #755140;
  --collection-grey: #646B70;
  --collection-cyan: #1F7F8C;
  --collection-indigo: #4A4F92;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Active values for dark appearance. */
    --collection-red: #EF6A63;
    --collection-orange: #F59E42;
    --collection-yellow: #F2C94C;
    --collection-light-blue: #72B7D9;
    --collection-blue: #6A9FDB;
    --collection-olive: #A7B65C;
    --collection-green: #6AB47D;
    --collection-teal: #62B3AA;
    --collection-brown: #AE826C;
    --collection-grey: #AAB2B8;
    --collection-cyan: #65C1CC;
    --collection-indigo: #8589C7;
  }
}