:root {
  --color-primary-blue: #0055ff;
  --color-primary-blue-hover: #0041cc;
  --color-primary-blue-active: #1a69ff;
  --color-primary-blue-focus: #003d99;
  --color-primary-blue-outline: #0055ff40;

  --color-primary-green-yellow: #ddf401;
  --color-primary-green-yellow-hover: #c4d401;
  --color-primary-green-yellow-active: #e8f94d;
  --color-primary-green-yellow-focus: #b8cc01;
  --color-primary-green-yellow-outline: #ddf40140;

  --color-secondary-blue: #00b8ff;
  --color-secondary-blue-hover: #0099cc;
  --color-secondary-blue-active: #4dd9ff;
  --color-secondary-blue-focus: #008cb3;
  --color-secondary-blue-outline: #00b8ff40;

  --color-secondary-green: #00c853;
  --color-secondary-green-hover: #009e42;
  --color-secondary-green-active: #4ddb7a;
  --color-secondary-green-focus: #00a94d;
  --color-secondary-green-outline: #00c85340;

  --color-secondary-yellow: #ffd600;
  --color-secondary-yellow-hover: #ffc400;
  --color-secondary-yellow-active: #ffe54d;
  --color-secondary-yellow-focus: #cdb800;
  --color-secondary-yellow-outline: #ffd60040;

  --color-bright-gray: #ebebeb;
  --color-brighter-gray: #f3f3f3;
  --color-gray: #4a5565;

  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 36px;
  --text-5xl: 48px;
}