@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");

:root {
  /* COLORS */
  --hue-color: 210;
  --first-color: hsl(var(--hue-color), 69%, 61%);
  --first-color-alt: hsl(var(--hue-color), 57%, 53%);
  --first-color-light: hsl(var(--hue-color), 92%, 85%);
  --second-color: hsl(var(--hue-color), 69%, 61%);
  --title-color: hsl(var(--hue-color), 8%, 15%);
  --text-color: hsl(var(--hue-color), 8%, 45%);
  --text-color-light: hsl(var(--hue-color), 8%, 65%);
  --footer-copy-text: hsl(var(--hue-color), 8%, 90%);
  --input-color: hsl(var(--hue-color), 70%, 96%);
  --scroll-bar-color: hsl(var(--hue-color), 12%, 90%);
  --scroll-thumb-color: hsl(var(--hue-color), 12%, 80%);
  --background-color: hsl(var(--hue-color), 60%, 99%);
  --header-shadow: rgba(0, 0, 0, 0.25);
  --container-color: #fff;

  /* FONT */
  --body-font: "Poppins", sans-serif;

  /* FONT SIZES */
  --smaller: 0.75rem;
  --small: 0.815rem;
  --normal: 0.95rem;
  --h3: 1.125rem;
  --h2: 1.25rem;
  --h1: 1.5rem;
  --big: 2rem;

  /* FONT WEIGHTS */
  --medium: 500;
  --semi-bold: 600;

  /* MARGINS */
  --m-0-25: 0.25rem;
  --m-0-5: 0.5rem;
  --m-0-75: 0.75rem;
  --m-1: 1rem;
  --m-1-5: 1.5rem;
  --m-2: 2rem;
  --m-2-5: 2.5rem;
  --m-3: 3rem;

  /* COMPONENTS */
  --header-height: 3rem;
}

body.dark-theme {
  --second-color: hsl(var(--hue-color), 30%, 8%);
  --title-color: hsl(var(--hue-color), 8%, 95%);
  --text-color: hsl(var(--hue-color), 8%, 75%);
  --footer-copy-text: hsl(var(--hue-color), 8%, 65%);
  --input-color: hsl(var(--hue-color), 29%, 16%);
  --scroll-bar-color: hsl(var(--hue-color), 12%, 48%);
  --scroll-thumb-color: hsl(var(--hue-color), 12%, 36%);
  --background-color: hsl(var(--hue-color), 28%, 12%);
  --header-shadow: rgba(255, 255, 255, 0.25);
  --container-color: hsl(var(--hue-color), 29%, 16%);
}