:root {
  --white: #ffffff;
  --black: #1d1d1b;
  --grey: #eae9ec;
  --grey-40: #dbdadc;

  --bp-small-width: 480px;
  --bp-medium-width: 768px;
  --bp-large-width: 1024px;
  --bp-wide-width: 1320px;

  --white-color: #ffffff;
  --black-color: #1d1d1b;
  --grey-color: #eae9ec;

  --primary-color: #7151f2;
  --primary-light-color: #d9d0ff;
  --primary-lightest-color: #f1eefe;
  --primary-lightest-60-color: rgba(239, 240, 254, 0.6);

  --secondary-color: #f1f78e;
  --secondary-light-color: #f4f8ac;
  --secondary-lightest-color: #fdffd0;

  --tertiary-color: #a3eee5;
  --tertiary-light-color: #cef6e9;
  --tertiary-lightest-color: #dff9f0;

  --quaternary-color: #ffbc90;
  --quaternary-light-color: #ffd6bc;
  --quaternary-lightest-color: #ffeadd;

  --quinary-color: #45bf84;
  --quinary-light-color: #e3f8ee;

  --senary-color: #ec9b50;
  --senary-light-color: #fff3e5;

  --septenary-color: #f95656;
  --septenary-light-color: #ffeaed;

  --octonary-color: #2464ea;
  --octonary-color-light: rgba(36, 100, 234, 0.16);

  --tiny-spacing: 4px;
  --smallest-spacing: 8px;
  --small-spacing: 16px;
  --medium-spacing: 20px;
  --large-spacing: 32px;
  --largest-spacing: 40px;

  --small-font: 13px;
  --medium-font: 16px;
  --large-font: 22px;

  --border-radius: 8px;
  --large-border-radius: 16px;
  --gap: 8px;
  --large-gap: 8px;
}