:root {
  --color-red-100: #ffeff0;
  --color-red-200: #f5c3c8;
  --color-red-300: #f0878c;
  --color-red-400: #e55c62;
  --color-red-500: #da161f;
  --color-red-600: #a00f19;
  --color-red-700: #690a0f;
  --color-red-800: #410a0f;
  --color-grey-100: #f2f2f2;
  --color-grey-200: #e5e5e5;
  --color-grey-300: #cccccc;
  --color-grey-400: #a0a0a0;
  --color-grey-500: #595959;
  --color-grey-600: #4c4c4c;
  --color-grey-700: #333333;
  --color-grey-800: #191919;
  --color-white: #ffffff;
  --color-teal-100: #f4f8fa;
  --color-teal-200: #e1ecf0;
  --color-teal-300: #a7c9d6;
  --color-teal-400: #649baf;
  --color-teal-500: #2e7893;
  --color-teal-600: #275e7b;
  --color-teal-700: #064e6d;
  --color-teal-800: #023350;
  --color-bg-color-red: var(--color-red-500);
  --color-text-color-default: var(--color-grey-800);
  --color-outline-color-dark: var(--color-grey-800);
  --color-bg-color-dark-grey: var(--color-grey-700);
  --color-bg-color-medium-grey: var(--color-grey-600);
  --color-text-color-grey: var(--color-grey-500);
  --color-icon-color-default: var(--color-grey-500);
  --color-outline-color-light: var(--color-grey-300);
  --color-line-color-default: var(--color-grey-200);
  --color-bg-color-light-grey: var(--color-grey-100);
  --color-focus-ring-default: var(--color-teal-500);
}