:root {
  --color-primary: #6886D4;

  --color-contrast-darkest: #010101;
  --color-contrast-darker: #201F23;
  --color-contrast-dark: #3B3841;
  --color-contrast-mid: #8E8D9B;
  --color-contrast-light: #AFAEBC;
  --color-contrast-lighter: #DDD8E9;
  --color-contrast-lightest: #FFFFFF;

  /* Transitions */
  --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
  --ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
  --bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* Elevations */
  --elevation-md: 0 1px 16px rgba(0, 0, 0, .085), 0 8px 24px rgba(0, 0, 0, .3);
  --elevation-lg: 0 1px 8px rgba(0, 0, 0, .085), 0 16px 48px rgba(0, 0, 0, .085), 0 24px 60px rgba(0, 0, 0, .085);
  --elevation-xl: 0 1px 8px rgba(0, 0, 0, .085), 0 16px 64px rgba(0, 0, 0, .15), 0 24px 100px rgba(0, 0, 0, .15);

  /* Roundess */
  --roundness-sm: 3px;
  --roundness-md: 5px;
  --roundness-full: 50em;
}