:root {
  /* Color */

  --Basic-Bright-100: #F9F9F9;
  --Basic-Dark-100: #0A0B0D;
  --Basic-Dark-100: #0A0B0D;
  --Basic-Dark-100-rgb: 10, 11, 13;
  --Neutral-Neutral-100: #E4E9ED;
  --Neutral-Neutral-200: #8E9CAF;
  --Neutral-Neutral-300:#606E86;
  --Neutral-Neutral-400: #252B36;
  --Neutral-Neutral-500:#16191D;
  --Basic-Bright-100:#F9F9F9;


  --clr-primary: #F24405;
   --text-secondary: #0A0B0D;
  --clr-secondary: #04113a;

  --clr-neutral100: #ebeff4;
  --clr-neutral200: #f7fafb;

  --clr-white: #ffffff;
  --clr-black: #000000;

  /* 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-white) !important;
}
.bg-primary {
  background-color: var(--Neutral-Neutral-400) !important;
}
.text-secondary {
  color: var(--text-secondary) !important;
}
.bg-secondary { 
  background-color: var(--Neutral-Neutral-500) !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-black {
  color: var(--clr-black) !important;
}
.bg-black {
  background-color: var(--clr-black) !important;
}