:root {
  --primary: #21337F;
  --primary-50: #f1f5ff;
  --primary-100: #dbe3ff;
  --primary-200: #becbff;
  --primary-300: #97a8ff;
  --primary-400: #6e78ff;
  --primary-500: #4c4cff;
  --primary-600: #21337F;
  --primary-700: #3420e2;
  --primary-800: #2a1db6;
  --primary-900: #27208f;
  --primary-950: #191353;

  --black-50: #f6f6f6;
  --black-100: #e7e7e7;
  --black-200: #d1d1d1;
  --black-300: #b0b0b0;
  --black-400: #888888;
  --black-500: #6d6d6d;
  --black-600: #5d5d5d;
  --black-700: #4f4f4f;
  --black-800: #454545;
  --black-900: #2d2d2d;
  --black-950: #181818;

  /* Black color opacity variants */
  --black-color01: rgba(0, 0, 0, 0.1);
  --black-color02: rgba(0, 0, 0, 0.2);
  --black-color04: rgba(0, 0, 0, 0.04);
  --black-color1: rgba(0, 0, 0, 1);
  --black-color2: rgba(0, 0, 0, 0.2);
  --black-color4: rgba(0, 0, 0, 0.4);
  --black-color5: rgba(0, 0, 0, 0.5);
  --black-color6: rgba(0, 0, 0, 0.6);
  --black-color7: rgba(0, 0, 0, 0.7);
  --black-color8: rgba(0, 0, 0, 0.8);
  --black-color9: rgba(0, 0, 0, 0.9);

  --white-color4: rgba(255, 255, 255, 0.4);

  --yellow-color1: rgba(255, 204, 0, 1);

  --secondary-purple: rgba(184, 153, 235, 1);
  --secondary-purple-hover: rgba(184, 153, 235, 0.8);
  --secondary-indigo:rgba(173, 173, 251, 1);
  --secondary-indigo-hover:rgba(173, 173, 251, 0.5);

  --secondary-red: rgba(255, 71, 71, 1);
  --secondary-red-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.4) 100%);

  --background-color1: rgba(255, 255, 255, 1);
  --background-color2: rgba(249, 249, 250, 1);
  --background-color3: rgba(255, 255, 255, 0.8);
  --background-color4: rgba(237, 238, 252, 1);
  --background-color5: rgba(230, 241, 253, 1);

  --cinnabar-50: #fef3f2;
  --cinnabar-100: #ffe3e1;
  --cinnabar-200: #ffcbc8;
  --cinnabar-300: #ffa7a1;
  --cinnabar-400: #fe746b;
  --cinnabar-500: #f6483d;
  --cinnabar-600: #e63e33;
  --cinnabar-700: #bf2016;
  --cinnabar-800: #9e1e16;
  --cinnabar-900: #832019;
  --cinnabar-950: #470c08;

  --buttercup-50: #fdf9e9;
  --buttercup-100: #fcf1c5;
  --buttercup-200: #fbe08d;
  --buttercup-300: #f8c74c;
  --buttercup-400: #f3ac16;
  --buttercup-500: #e3960f;
  --buttercup-600: #c4720a;
  --buttercup-700: #9c500c;
  --buttercup-800: #823f11;
  --buttercup-900: #6e3415;
  --buttercup-950: #401908;

  --golden-50: #fffaeb;
  --golden-100: #fff1c6;
  --golden-200: #ffe088;
  --golden-300: #ffcf5c;
  --golden-400: #ffb420;
  --golden-500: #f99007;
  --golden-600: #dd6a02;
  --golden-700: #b74806;
  --golden-800: #94370c;
  --golden-900: #7a2e0d;
  --golden-950: #461602;

  --green-50: #f1fcf3;
  --green-100: #dff9e5;
  --green-200: #c1f1cd;
  --green-300: #90e5a6;
  --green-400: #59cf78;
  --green-500: #2fa94f;
  --green-600: #249542;
  --green-700: #207537;
  --green-800: #1e5d2f;
  --green-900: #1a4d29;
  --green-950: #092a14;

  --lavender-50: #f6f2ff;
  --lavender-100: #ede8ff;
  --lavender-200: #ded4ff;
  --lavender-300: #c6b2ff;
  --lavender-400: #b493ff;
  --lavender-500: #9155fd;
  --lavender-600: #8432f5;
  --lavender-700: #7520e1;
  --lavender-800: #631abd;
  --lavender-900: #52189a;
  --lavender-950: #320c69;

  --seagull-50: #f0faff;
  --seagull-100: #dff5ff;
  --seagull-200: #b8ecff;
  --seagull-300: #66daff;
  --seagull-400: #33cffd;
  --seagull-500: #09baee;
  --seagull-600: #0096cc;
  --seagull-700: #0077a5;
  --seagull-800: #046588;
  --seagull-900: #0a5370;
  --seagull-950: #06354b;

  --neutral-100: #ffffff;
  --neutral-200: #f7f7fb;
  --neutral-300: #eff0f6;
  --neutral-400: #d9dbe9;
  --neutral-500: #a0a3bd;
  --neutral-600: #6e7191;
  --neutral-700: #4e4b66;
  --neutral-800: #170f49;

  --background-color2: #fafcff;
}