:root {
  /* COLORS */
  --color-primary: #85a4ed;

  --color-text-medium: #686868;
  --color-text-light: #e8e8e8;
  --color-text-dark: #333333;

  --color-background: #1a1a1b;
  --color-container-background: #252528;
  --color-accorrdion-background: #343437;

  /* SPACING */
  --spacing-xx-small: 0.1rem;
  --spacing-x-small: 0.25rem;
  --spacing-small: 0.5rem;
  --spacing-medium: 1rem;
  --spacing-large: 2rem;
  --spacing-x-large: 3rem;

  /* FONT SIZE */
  --font-size-small: 0.5rem;
  --font-size-base: 1rem;
  --font-size-medium: 1.1rem;
  --font-size-large: 1.5rem;
  --font-size-x-large: 2rem;

  /* BORDER RADIUS */
  --boarder-radius-small: 0.25rem;
  --boarder-radius-medium: 0.5rem;

  /* ANIMATION SPEED */
  --animated-speed-normal: 0.2s linear;
}