:root {
    --color-bg: rgb(250, 250, 250);
    --color-navbar-bg: rgb(248, 248, 248);
    --searchbar-bg: rgb(255, 255, 255);
    --color-gradient-start: rgb(217, 183, 254);
    --color-gradient-end: rgb(250, 250, 250);
    --color-text-small: #5a5d62;
    /* neutral-300 */
    --color-text-big: #1F2937;
    /* neutral-800 */
    /* neutral-100 */
    --color-recipe-bg: rgb(38, 38, 38);
    --color-text-nav-active: #333436;
    --color-text-nav-mobile-active: #303030;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --color-bg: rgb(5, 5, 5);
      --color-navbar-bg: rgb(12, 12, 12);
      --searchbar-bg: rgb(9, 9, 9);
      --color-gradient-start: rgb(68, 47, 90);
      --color-gradient-end: rgb(5, 5, 5);

      --color-text-small: #D1D5DB;
      --color-text-big: #F3F4F6;
       --color-text-nav-active: #D1D5DB;
       --color-text-nav-mobile-active: #dbdbdb;
    }
  }
    

body {
  font-family: 'Inter', sans-serif;
}

.inter-semi-extrabold {
  font-family: 'Inter', sans-serif;
  font-weight: 580;
  /* Smoothly rendered with variable font */
}

.inter-semi-bold {
  font-family: 'Inter', sans-serif;
  font-weight: 510;
  /* Smoothly rendered with variable font */
}

.inter-semi-mediumbold {
  font-family: 'Inter', sans-serif;
  font-weight: 450;
  /* Smoothly rendered with variable font */
}