// break-points
$sm: 450px;
$lg: 1250px;

// media-queries
$mobile: "(max-width: #{$sm})";
$tablet: "(min-width: #{$sm}) and (max-width: #{$lg})";
$desktop: "(min-width: #{$lg})";

:root {
  // background-colors (testing)
  // --clr-bg-lighter: #fff;
  // --clr-bg-light: #fff;
  // --clr-bg-normal: #fff;
  // --clr-bg-dark: #fff;
  // --clr-bg-darker: #fff;

  // background-colors
  --hue-main: 190;
  --clr-bg-lighter: hsl(var(--hue-main), 100%, 85%);
  --clr-bg-light: hsl(var(--hue-main), 75%, 75%);
  --clr-bg-normal: hsl(var(--hue-main), 50%, 50%);
  --clr-bg-dark: hsl(var(--hue-main), 75%, 25%);
  --clr-bg-darker: hsl(var(--hue-main), 100%, 15%);

  // font-colors
  --clr-font-light: rgb(255, 255, 255);
  --clr-font-dark: rgb(45, 45, 45);

  // shadows
  --shadow-primary: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  --shadow-main: 0 0 5.5px 0.5px var(--clr-bg-light);

  // others
  --clr-bg-skeleton: #c4c4c4;
}

// margins

// if 1rem === 16px =>

// 6px = 0.375
// 8px = 0.5rem
// 10px = 0.625rem
// 12px = 0.75rem
// 14px = 0.875rem
// 16px = 1rem (base)
// 18px = 1.125rem
// 20px = 1.25rem
// 24px = 1.5rem
// 30px = 1.875rem
// 32px = 2rem
