:root {
  --color-primary-white: #fff;
  --color-primary-back: #171717;
  --color-primary-green: #53d476;
  --color-secondary-green: #e7f9eb;
  --color-tertiary-green: #009026;
  --color-light-gray: #f7f7f7;
  --color-medium-gray: #dddddd;
  --color-dark-gray: #838383;
  --color-primary-blue: #6986ff;
  --color-secondary-blue: #e9eeff;
  --color-primary-red: #d45353;
  --color-secondary-red: #f9e7e7;
  --color-tertiary-red: #900000;
  --color-primary-yellow: #d4be53;
  --color-secondary-yellow: #f9f8e7;
  --color-tertiary-yellow: #908400;

  --spacing-small: 0.5rem;
  --spacing-medium: 1rem;
  --spacing-large: 1.5rem;
  --spacing-xlarge: 2rem;
  --spacing-xxlarge: 4rem;

  --font-size-xsmall: 0.5rem;
  --font-size-small: 0.8rem;
  --font-size-medium: 1rem;
  --font-size-large: 1.2rem;
  --font-size-xlarge: 1.5rem;
  --font-size-xxlarge: 2rem;

  --gap: 1rem;
}