:root {
  --sb-color-teal-50: #effefc;
  --sb-color-teal-100: #c7fff8;
  --sb-color-teal-200: #90fff1;
  --sb-color-teal-300: #51f7e9;
  --sb-color-teal-400: #1de4d9;
  --sb-color-teal-500: #04c8c0;
  --sb-color-teal-600: #00b3b0;
  --sb-color-teal-700: #05807f;
  --sb-color-teal-800: #0a6465;
  --sb-color-teal-900: #0d5454;
  --sb-color-teal-950: #003033;
  --sb-color-teal-disabled: #67b2b1;
  --sb-color-teal: var(--sb-color-teal-700);
  --sb-color-teal-muted-50: #effefc;
  --sb-color-teal-muted-100: #c7fff8;
  --sb-color-teal-muted-200: #93f3e7;
  --sb-color-teal-muted-300: #48dccf;
  --sb-color-teal-muted-400: #3bc4b9;
  --sb-color-teal-muted-500: #03aba4;
  --sb-color-teal-muted-600: #01938d;
  --sb-color-teal-muted-700: #05807f;
  --sb-color-teal-muted-800: #0a6465;
  --sb-color-teal-muted-900: #0d5454;
  --sb-color-teal-muted-950: #003033;
  --sb-color-teal-muted: var(--sb-color-teal-muted-700);
  --sb-color-dark-blue-50: #f1f6fd;
  --sb-color-dark-blue-100: #eeeef2;
  --sb-color-dark-blue-150: #e6eaf1;
  --sb-color-dark-blue-200: #d7d7e0;
  --sb-color-dark-blue-300: #b4b8c5;
  --sb-color-dark-blue-400: #8b91a7;
  --sb-color-dark-blue-500: #6a728a;
  --sb-color-dark-blue-600: #545b6f;
  --sb-color-dark-blue-700: #32467b;
  --sb-color-dark-blue-800: #2b4169;
  --sb-color-dark-blue-900: #262e48;
  --sb-color-dark-blue-950: #1b243f;
  --sb-color-dark-blue-disabled: #717687;
  --sb-color-dark-blue: var(--sb-color-dark-blue-950);
  --sb-color-green-50: #eefbf4;
  --sb-color-green-100: #d7f4e3;
  --sb-color-green-200: #b2e8cb;
  --sb-color-green-300: #7fd6ac;
  --sb-color-green-400: #4bbc8a;
  --sb-color-green-500: #2db47d;
  --sb-color-green-600: #1a8159;
  --sb-color-green-700: #15674a;
  --sb-color-green-800: #13523b;
  --sb-color-green-900: #104432;
  --sb-color-green-950: #08261d;
  --sb-color-green: var(--sb-color-green-600);
  --sb-color-yellow-50: #fff4d5;
  --sb-color-yellow-100: #ffe6aa;
  --sb-color-yellow-200: #fde58a;
  --sb-color-yellow-300: #fbce41;
  --sb-color-yellow-400: #fabd25;
  --sb-color-yellow-500: #f49c0c;
  --sb-color-yellow-600: #d87507;
  --sb-color-yellow-700: #b3520a;
  --sb-color-yellow-800: #913f0f;
  --sb-color-yellow-900: #78340f;
  --sb-color-yellow-950: #451903;
  --sb-color-yellow-disabled: #f7d274;
  --sb-color-yellow: var(--sb-color-yellow-500);
  --sb-color-blue-50: #f1f5fd;
  --sb-color-blue-100: #e0e9f9;
  --sb-color-blue-200: #c8d9f5;
  --sb-color-blue-300: #a2c1ee;
  --sb-color-blue-400: #75a0e5;
  --sb-color-blue-500: #557fdc;
  --sb-color-blue-600: #395ece;
  --sb-color-blue-700: #3751be;
  --sb-color-blue-800: #32449b;
  --sb-color-blue-900: #2d3c7b;
  --sb-color-blue-950: #1f274c;
  --sb-color-blue-disabled: #7c8bca;
  --sb-color-blue: var(--sb-color-blue-600);
  --sb-color-red-50: #fff2f1;
  --sb-color-red-100: #ffe2e1;
  --sb-color-red-200: #ffcac7;
  --sb-color-red-300: #ffa5a0;
  --sb-color-red-400: #ff6159;
  --sb-color-red-500: #f83c3b;
  --sb-color-red-600: #e5271d;
  --sb-color-red-700: #c11c14;
  --sb-color-red-800: #a01b14;
  --sb-color-red-900: #841d18;
  --sb-color-red-950: #480a07;
  --sb-color-red-disabled: #ec7872;
  --sb-color-red: var(--sb-color-red-600);
  --sb-color-gray-50: #f6f7f8;
  --sb-color-gray-100: #ebecee;
  --sb-color-gray-200: #dbdde2;
  --sb-color-gray-300: #c3c7cd;
  --sb-color-gray-400: #b1b5be;
  --sb-color-gray-500: #8f93a2;
  --sb-color-gray-600: #7e8192;
  --sb-color-gray-700: #717384;
  --sb-color-gray-800: #5f616e;
  --sb-color-gray-900: #4f5059;
  --sb-color-gray-950: #333338;
  --sb-color-gray-1000: #242429;
  --sb-color-gray-disabled: #ecedf0;
  --sb-color-gray: var(--sb-color-gray-400);
  --sb-color-black: #000;
  --sb-color-black-50: #0f1013;
  --sb-color-white: #fff;

  // text colors
  --sb-color-text-black: var(--sb-color-black);
  --sb-color-text-blue: var(--sb-color-blue-600);
  --sb-color-text-blue-disabled: var(--sb-color-blue-disabled);
  --sb-color-text-blue-hover: var(--sb-color-blue-400);
  --sb-color-text-blue-950: var(--sb-color-blue-950);
  --sb-color-text-blue-800: var(--sb-color-blue-800);
  --sb-color-text-blue-400: var(--sb-color-blue-400);
  --sb-color-text-blue-600: var(--sb-color-blue-600);
  --sb-color-text-dark-blue: var(--sb-color-dark-blue-950);
  --sb-color-text-dark-blue-400: var(--sb-color-dark-blue-400);
  --sb-color-text-dark-blue-disabled: var(--sb-color-dark-blue-disabled);
  --sb-color-text-dark-blue-hover: var(--sb-color-dark-blue-900);
  --sb-color-text-gray: var(--sb-color-dark-blue-500);
  --sb-color-text-gray-100: var(--sb-color-gray-100);
  --sb-color-text-gray-500: var(--sb-color-gray-500);
  --sb-color-text-gray-600: var(--sb-color-gray-600);
  --sb-color-text-gray-700: var(--sb-color-gray-700);
  --sb-color-text-gray-800: var(--sb-color-gray-800);
  --sb-color-text-gray-950: var(--sb-color-gray-950);
  --sb-color-text-gray-hover: var(--sb-color-gray-200);
  --sb-color-text-gray-light: var(--sb-color-gray-400);
  --sb-color-text-green: var(--sb-color-green-500);
  --sb-color-text-green-300: var(--sb-color-green-300);
  --sb-color-text-green-700: var(--sb-color-green-700);
  --sb-color-text-red: var(--sb-color-red-400);
  --sb-color-text-red-500: var(--sb-color-red-500);
  --sb-color-text-red-600: var(--sb-color-red-600);
  --sb-color-text-red-700: var(--sb-color-red-700);
  --sb-color-text-red-disabled: var(--sb-color-red-disabled);
  --sb-color-text-red-hover: var(--sb-color-red-600);
  --sb-color-text-teal: var(--sb-color-teal-700);
  --sb-color-text-teal-500: var(--sb-color-teal-500);
  --sb-color-text-teal-600: var(--sb-color-teal-600);
  --sb-color-text-teal-800: var(--sb-color-teal-800);
  --sb-color-text-teal-disabled: var(--sb-color-teal-disabled);
  --sb-color-text-teal-hover: var(--sb-color-teal-900);
  --sb-color-text-white: var(--sb-color-white);
  --sb-color-text-yellow: var(--sb-color-yellow-500);
  --sb-color-text-yellow-300: var(--sb-color-yellow-300);
  --sb-color-text-yellow-400: var(--sb-color-yellow-400);
  --sb-color-text-yellow-500: var(--sb-color-yellow-500);
  --sb-color-text-yellow-600: var(--sb-color-yellow-600);
  --sb-color-text-yellow-700: var(--sb-color-yellow-700);
  --sb-color-text-yellow-800: var(--sb-color-yellow-800);
  --sb-color-text-yellow-disabled: var(--sb-color-yellow-disabled);
  --sb-color-text-yellow-hover: var(--sb-color-yellow-300);

  // background colors
  --sb-color-bg-black: var(--sb-color-black);
  --sb-color-bg-black-50: var(--sb-color-black-50);
  --sb-color-bg-blue: var(--sb-color-blue-600);
  --sb-color-bg-blue-disabled: var(--sb-color-blue-disabled);
  --sb-color-bg-blue-hover: var(--sb-color-blue-400);
  --sb-color-bg-blue-light: var(--sb-color-blue-100);
  --sb-color-bg-blue-950: var(--sb-color-blue-950);
  --sb-color-bg-blue-800: var(--sb-color-blue-800);
  --sb-color-bg-blue-200: var(--sb-color-blue-200);
  --sb-color-bg-blue-50: var(--sb-color-blue-50);
  --sb-color-bg-dark-blue: var(--sb-color-dark-blue-950);
  --sb-color-bg-dark-blue-150: var(--sb-color-dark-blue-150);
  --sb-color-bg-dark-blue-200: var(--sb-color-dark-blue-200);
  --sb-color-bg-dark-blue-500: var(--sb-color-dark-blue-500);
  --sb-color-bg-dark-blue-800: var(--sb-color-dark-blue-800);
  --sb-color-bg-dark-blue-disabled: var(--sb-color-dark-blue-disabled);
  --sb-color-bg-dark-blue-hover: var(--sb-color-dark-blue-900);
  --sb-color-bg-dark-blue-transparent: #1b243f33;
  --sb-color-bg-green: var(--sb-color-green-500);
  --sb-color-bg-green-50: var(--sb-color-green-50);
  --sb-color-bg-green-200: var(--sb-color-green-200);
  --sb-color-bg-green-light: var(--sb-color-green-100);
  --sb-color-bg-green-600: var(--sb-color-green-600);
  --sb-color-bg-gray: var(--sb-color-gray-400);
  --sb-color-bg-gray-50: var(--sb-color-gray-50);
  --sb-color-bg-gray-100: var(--sb-color-gray-100);
  --sb-color-bg-gray-200: var(--sb-color-gray-200);
  --sb-color-bg-gray-300: var(--sb-color-gray-300);
  --sb-color-bg-gray-500: var(--sb-color-gray-500);
  --sb-color-bg-gray-600: var(--sb-color-gray-600);
  --sb-color-bg-gray-700: var(--sb-color-gray-700);
  --sb-color-bg-gray-800: var(--sb-color-gray-800);
  --sb-color-bg-gray-900: var(--sb-color-gray-900);
  --sb-color-bg-gray-1000: var(--sb-color-gray-1000);
  --sb-color-bg-gray-disabled: var(--sb-color-gray-disabled);
  --sb-color-bg-gray-hover: var(--sb-color-gray-200);
  --sb-color-bg-red: var(--sb-color-red-700);
  --sb-color-bg-red-50: var(--sb-color-red-50);
  --sb-color-bg-red-200: var(--sb-color-red-200);
  --sb-color-bg-red-400: var(--sb-color-red-400);
  --sb-color-bg-red-500: var(--sb-color-red-500);
  --sb-color-bg-red-disabled: var(--sb-color-red-disabled);
  --sb-color-bg-red-hover: var(--sb-color-red-600);
  --sb-color-bg-red-light: var(--sb-color-red-200);
  --sb-color-bg-teal: var(--sb-color-teal-700);
  --sb-color-bg-teal-600: var(--sb-color-teal-600);
  --sb-color-bg-teal-200: var(--sb-color-teal-200);
  --sb-color-bg-teal-100: var(--sb-color-teal-100);
  --sb-color-bg-teal-disabled: var(--sb-color-teal-disabled);
  --sb-color-bg-teal-hover: var(--sb-color-teal-900);
  --sb-color-bg-teal-light: var(--sb-color-teal-100);
  --sb-color-bg-white: var(--sb-color-white);
  --sb-color-bg-yellow-100: var(--sb-color-yellow-100);
  --sb-color-bg-yellow-200: var(--sb-color-yellow-200);
  --sb-color-bg-yellow-300: var(--sb-color-yellow-300);
  --sb-color-bg-yellow-400: var(--sb-color-yellow-400);
  --sb-color-bg-yellow-600: var(--sb-color-yellow-600);
  --sb-color-bg-yellow-700: var(--sb-color-yellow-700);
  --sb-color-bg-yellow: var(--sb-color-yellow-500);
  --sb-color-bg-yellow-disabled: var(--sb-color-yellow-disabled);
  --sb-color-bg-yellow-hover: var(--sb-color-yellow-600);
  --sb-color-bg-yellow-light: var(--sb-color-yellow-100);
  --sb-color-bg-dark-blue-transparent: #1b243f33;
  --sb-color-bg-transparent: transparent;

  // border colors
  --sb-color-border-teal: var(--sb-color-teal-700);
  --sb-color-border-teal-focus: var(--sb-color-teal-300);
  --sb-color-border-dark-blue: var(--sb-color-dark-blue-950);
  --sb-color-border-dark-blue-focus: var(--sb-color-dark-blue-400);
  --sb-color-border-blue: var(--sb-color-blue-600);
  --sb-color-border-blue-light: var(--sb-color-blue-200);
  --sb-color-border-yellow: var(--sb-color-yellow-400);
  --sb-color-border-yellow-light: var(--sb-color-yellow-50);
  --sb-color-border-yellow-focus: var(--sb-color-yellow-500);
  --sb-color-border-red: var(--sb-color-red-600);
  --sb-color-border-red-light: var(--sb-color-red-200);
  --sb-color-border-gray: var(--sb-color-gray-200);
  --sb-color-border-gray-light: var(--sb-color-gray-100);
  --sb-color-border-white: var(--sb-color-white);
  --sb-color-border-transparent: transparent;
  --sb-color-border-green: var(--sb-color-green-500);

  // shadow colors
  --sb-color-shadow-teal: var(--sb-color-teal-600);
  --sb-color-shadow-teal-100: var(--sb-color-teal-100);
  --sb-color-shadow-green-100: var(--sb-color-green-100);
  --sb-color-shadow-gray-100: var(--sb-color-gray-100);
  --sb-color-shadow-dark-blue-transparent: #1f274c15;
}