:root {
  --theme-blue-300: #95acff;
  --theme-blue-400: #448eef;
  --theme-blue-500: #047bf8;
  --theme-blue-600: #0362c6;
  --theme-blue-700: #1c4cc3;
  --theme-blue-800: #0e369a;
  --theme-blue-900: #00369D;

  --theme-purple-300: #ac95ff;
  --theme-purple-400: #8e44ef;
  --theme-purple-500: #7b04f8;
  --theme-purple-600: #6203c6;
  --theme-purple-700: #4c1cc3;
  --theme-purple-800: #360e9a;
  --theme-purple-900: #36009D;

  --theme-orange-300: #ffac95;
  --theme-orange-400: #ef8e44;
  --theme-orange-500: #f87b04;
  --theme-orange-600: #c66203;
  --theme-orange-700: #c34c1c;
  --theme-orange-800: #9a360e;
  --theme-orange-900: #9D3600;

  --theme-pink-300: #ff95ac;
  --theme-pink-400: #ef448e;
  --theme-pink-500: #f8047b;
  --theme-pink-600: #c60362;
  --theme-pink-700: #c31c4c;
  --theme-pink-800: #9a0e36;
  --theme-pink-900: #9D0036;

  --theme-gray-300: #ccd9e8;
  --theme-gray-400: #9facc7;
  --theme-gray-500: #777E94;
  --theme-gray-600: #4D566F;
  --theme-gray-700: #323c58;
  --theme-gray-800: #2b344e;
  --theme-gray-900: #232942;

  /* TOOD Kind of yuck? */
  --theme-sand-300: #e8d9cc;
  --theme-sand-400: #c7ac9f;
  --theme-sand-500: #947E77;
  --theme-sand-600: #6F564D;
  --theme-sand-700: #583c32;
  --theme-sand-800: #4e342b;
  --theme-sand-900: #422923;
  
}

:root, .theme-blue {
  --primary-300: var(--theme-blue-300);
  --primary-400: var(--theme-blue-400);
  --primary-500: var(--theme-blue-500);
  --primary-600: var(--theme-blue-600);
  --primary-700: var(--theme-blue-700);
  --primary-800: var(--theme-blue-800);
  --primary-900: var(--theme-blue-900);

  --secondary-300: var(--theme-blue-300);
  --secondary-400: var(--theme-blue-400);
  --secondary-500: var(--theme-blue-500);
  --secondary-600: var(--theme-blue-600);
  --secondary-700: var(--theme-blue-700);
  --secondary-800: var(--theme-blue-800);
  --secondary-900: var(--theme-blue-900);

  --dark-primary-300: var(--theme-gray-300);
  --dark-primary-400: var(--theme-gray-400);
  --dark-primary-500: var(--theme-gray-500);
  --dark-primary-600: var(--theme-gray-600);
  --dark-primary-700: var(--theme-gray-700);
  --dark-primary-800: var(--theme-gray-800);
  --dark-primary-900: var(--theme-gray-900);

  --dark-secondary-300: var(--theme-gray-300);
  --dark-secondary-400: var(--theme-gray-400);
  --dark-secondary-500: var(--theme-gray-500);
  --dark-secondary-600: var(--theme-gray-600);
  --dark-secondary-700: var(--theme-gray-700);
  --dark-secondary-800: var(--theme-gray-800);
  --dark-secondary-900: var(--theme-gray-900);

  --dark-accent-200: #b3bcde;

  --light-gradient-from: #D7BBEA;
  --light-gradient-to: #65A8F1;
  --dark-gradient-from: #633d7d;
  --dark-gradient-to: #2867ab;
}

.theme-purple {
  --primary-300: var(--theme-purple-300);
  --primary-400: var(--theme-purple-400);
  --primary-500: var(--theme-purple-500);
  --primary-600: var(--theme-purple-600);
  --primary-700: var(--theme-purple-700);
  --primary-800: var(--theme-purple-800);
  --primary-900: var(--theme-purple-900);

  --secondary-300: var(--theme-purple-300);
  --secondary-400: var(--theme-purple-400);
  --secondary-500: var(--theme-purple-500);
  --secondary-600: var(--theme-purple-600);
  --secondary-700: var(--theme-purple-700);
  --secondary-800: var(--theme-purple-800);
  --secondary-900: var(--theme-purple-900);

  --dark-primary-300: var(--theme-gray-300);
  --dark-primary-400: var(--theme-gray-400);
  --dark-primary-500: var(--theme-gray-500);
  --dark-primary-600: var(--theme-gray-600);
  --dark-primary-700: var(--theme-gray-700);
  --dark-primary-800: var(--theme-gray-800);
  --dark-primary-900: var(--theme-gray-900);

  --dark-accent-200: #bcb3de;

  --light-gradient-from: #EABBD7;
  --light-gradient-to: #A865F1;
  --dark-gradient-from: #7d3d63;
  --dark-gradient-to: #6728ab;
}

.theme-orange {
  --primary-300: var(--theme-orange-300);
  --primary-400: var(--theme-orange-400);
  --primary-500: var(--theme-orange-500);
  --primary-600: var(--theme-orange-600);
  --primary-700: var(--theme-orange-700);
  --primary-800: var(--theme-orange-800);
  --primary-900: var(--theme-orange-900);

  --secondary-300: var(--theme-orange-300);
  --secondary-400: var(--theme-orange-400);
  --secondary-500: var(--theme-orange-500);
  --secondary-600: var(--theme-orange-600);
  --secondary-700: var(--theme-orange-700);
  --secondary-800: var(--theme-orange-800);
  --secondary-900: var(--theme-orange-900);

  --dark-primary-300: var(--theme-sand-300);
  --dark-primary-400: var(--theme-sand-400);
  --dark-primary-500: var(--theme-sand-500);
  --dark-primary-600: var(--theme-sand-600);
  --dark-primary-700: var(--theme-sand-700);
  --dark-primary-800: var(--theme-sand-800);
  --dark-primary-900: var(--theme-sand-900);

  --dark-accent-200: #debcb3;

  --light-gradient-from: #EABBD7;
  --light-gradient-to: #F1A865;
  --dark-gradient-from: #7d3d63;
  --dark-gradient-to: #ab6728;
}

.theme-pink {
  --primary-300: var(--theme-pink-300);
  --primary-400: var(--theme-pink-400);
  --primary-500: var(--theme-pink-500);
  --primary-600: var(--theme-pink-600);
  --primary-700: var(--theme-pink-700);
  --primary-800: var(--theme-pink-800);
  --primary-900: var(--theme-pink-900);

  --secondary-300: var(--theme-pink-300);
  --secondary-400: var(--theme-pink-400);
  --secondary-500: var(--theme-pink-500);
  --secondary-600: var(--theme-pink-600);
  --secondary-700: var(--theme-pink-700);
  --secondary-800: var(--theme-pink-800);
  --secondary-900: var(--theme-pink-900);

  --dark-primary-300: var(--theme-gray-300);
  --dark-primary-400: var(--theme-gray-400);
  --dark-primary-500: var(--theme-gray-500);
  --dark-primary-600: var(--theme-gray-600);
  --dark-primary-700: var(--theme-gray-700);
  --dark-primary-800: var(--theme-gray-800);
  --dark-primary-900: var(--theme-gray-900);

  --dark-accent-200: #bcb3de;

  --light-gradient-from: #D7BBEA;
  --light-gradient-to: #F165A8;
  --dark-gradient-from: #6728ab;
  --dark-gradient-to: #633d7d;
}

.theme-secondary-blue {
  --secondary-300: var(--theme-blue-300);
  --secondary-400: var(--theme-blue-400);
  --secondary-500: var(--theme-blue-500);
  --secondary-600: var(--theme-blue-600);
  --secondary-700: var(--theme-blue-700);
  --secondary-800: var(--theme-blue-800);
  --secondary-900: var(--theme-blue-900);
}

.theme-secondary-purple {
  --secondary-300: var(--theme-purple-300);
  --secondary-400: var(--theme-purple-400);
  --secondary-500: var(--theme-purple-500);
  --secondary-600: var(--theme-purple-600);
  --secondary-700: var(--theme-purple-700);
  --secondary-800: var(--theme-purple-800);
  --secondary-900: var(--theme-purple-900);
}


.theme-secondary-orange {
  --secondary-300: var(--theme-orange-300);
  --secondary-400: var(--theme-orange-400);
  --secondary-500: var(--theme-orange-500);
  --secondary-600: var(--theme-orange-600);
  --secondary-700: var(--theme-orange-700);
  --secondary-800: var(--theme-orange-800);
  --secondary-900: var(--theme-orange-900);
}

.theme-secondary-pink {
  --secondary-300: var(--theme-pink-300);
  --secondary-400: var(--theme-pink-400);
  --secondary-500: var(--theme-pink-500);
  --secondary-600: var(--theme-pink-600);
  --secondary-700: var(--theme-pink-700);
  --secondary-800: var(--theme-pink-800);
  --secondary-900: var(--theme-pink-900);
}

/* This isn't intended for use by any userland applications. */
/* We do this strictly to avoid shipping different color versions of our logo. */
/* This is disabled by default in new applications. */
.theme-logo-color-shift {
  &.theme-pink {
    img.theme-logo {
      filter: hue-rotate(105deg) brightness(0.9);
    }
  }

  &.theme-purple {
    img.theme-logo {
      filter: hue-rotate(33deg) brightness(0.9);
    }
  }

  &.theme-orange {
    img.theme-logo {
      filter: hue-rotate(160deg) brightness(1.10);
    }
  }
}