:root {
  /* colors */
  --color-primary: #d3e548;
  --color-secondary: #818cf8;

  --color-positive: #22c55e;
  --color-negative: #ef4444;

  --background-color: #f8fafc;
  --border-color: #e2e8f0;

  /* fonts */
  --body-font-color: #1e293b;
  --body-font-size: 16px;
  --body-font-family: 'Open Sans', sans-serif;
  --navigation-font-size: 0.9375rem;

  --heading-font-color: #1e293b;
  --heading-font-size: 24px;
  --heading-font-family: 'Open Sans', sans-serif;

  /* buttons */
  --primary-button-font-color: #ffffff;
  --primary-button-background-color: #48e5a9;
  --primary-button-border-color: #3acb5e;

  --secondary-button-font-color: #1e1b4b;
  --secondary-button-background-color: #c4b5fd;
  --secondary-button-border-color: #6d28d9;

  --tertiary-button-font-color: #4f46e5;
  --tertiary-button-background-color: #ffffff;
  --tertiary-button-border-color: #4338ca;

  --button-radius: 0px;

  /* inputs */
  --input-radius: 4px;
  --input-border-color: #e2e8f0;

  --breakpoint-sm:  40rem; /* 640px */
  --breakpoint-md:  48rem; /* 768px */
  --breakpoint-lg:  64rem; /* 1024px */
  --breakpoint-xl:  80rem; /* 1280px */
  --breakpoint-2xl: 96rem; /* 1536px */
}