@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap");

@import "tailwindcss";

@theme {
  --color-primary-800: #0891aa;
  --color-primary-700: #18abc6;
  --color-primary-300: #67c6e3;
  --color-primary-100: #eff9fb;

  --color-grey-1000: #151515;
  --color-grey-900: #6d6d6d;
  --color-grey-800: #797979;
  --color-grey-700: #7d7d7d;
  --color-grey-600: #8d8d8d;
  --color-grey-500: #b3b3b3;
  --color-grey-400: #c7c7c7;
  --color-grey-300: #d9d9d9;

  --color-yellow: #fec107;
  --color-red: #ff1500;
  --color-green: #18c692;

  --font-sans: "Poppins", "Helvetica Neue", Helvetica;
  --font-rubik: "Rubik", "Helvetica Neue", Helvetica;

  --tracking-6: 0.06rem;

  /* all of the following is related to our loading spinner animation */
  --animate-spinn: spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  --animate-spinn-45: spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite -0.45s;
  --animate-spinn-30: spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite -0.3s;
  --animate-spinn-15: spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite -0.15s;

  @keyframes spinner {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
}
