:root {
  /* Color */
  --clr-accent: #354649;

  --clr-neutral-100: #eef1f2;
  --clr-neutral-200: #e0e7e9;
  --clr-neutral-300: #cfd7d9;
  --clr-neutral-400: #a3c6c4;
  --clr-neutral-500: #6c7a89;

  --clr-white: #ffffff;
  --clr-dark: #161d1f;

  /* Gradients */
  --grad-primary: linear-gradient(233.64deg, rgba(255, 255, 255, 0) 18.77%, #6c82a6 84.43%);
}

/* Texts and backgrounds classes */

.text-primary {
  color: var(--clr-primary) !important;
}
.bg-primary {
  background-color: var(--clr-primary) !important;
}
.text-secondary {
  color: var(--clr-secondary) !important;
}
.bg-secondary {
  background-color: var(--clr-secondary) !important;
}
.text-neutral100 {
  color: var(--clr-neutral100) !important;
}
.bg-neutral100 {
  background-color: var(--clr-neutral100) !important;
}
.text-neutral200 {
  color: var(--clr-neutral200) !important;
}
.bg-neutral200 {
  background-color: var(--clr-neutral200) !important;
}
.text-white {
  color: var(--clr-white) !important;
}
.bg-white {
  background-color: var(--clr-white) !important;
}
.bg-grad {
  background-image: var(--grad-primary) !important;
}
.text-dark {
  color: var(--clr-dark) !important;
}
.bg-dark {
  background-color: var(--clr-dark) !important;
}