/* LIGHT THEME */
body {
  --tint: 150;
  --product-background: hsl(var(--tint), 18%, 94%);
  --header-bottom-line: hsl(var(--tint), 18%, 95%);
  --get-button-background: hsl(var(--tint), 56%, 28%);
  --app-name-color: hsl(var(--tint), 22%, 16%);
  --intro-color: hsl(var(--tint), 56%, 28%);
  --neutral-bigblock-background: white;
  --colored-big-block-background: hsl(var(--tint), 56%, 25%);
  --big-block-title-color: hsl(var(--tint), 56%, 28%);
  --colored-big-block-title: hsl(var(--tint), 90%, 70%);
  --big-block-text-color: black;
  --small-block-svg-color: hsl(var(--tint), 18%, 78%);
}

/* DARK THEME */
@media (prefers-color-scheme: dark) {
  body {
    --product-background: hsl(var(--tint), 18%, 8%);
    --header-bottom-line: hsl(var(--tint), 18%, 14%);
    --get-button-background: hsl(var(--tint), 56%, 26%);
    --app-name-color: hsl(var(--tint), 22%, 90%);
    --intro-color: hsl(var(--tint), 76%, 29%);
    --neutral-bigblock-background: hsl(var(--tint), 70%, 4%);
    --colored-big-block-background: hsl(var(--tint), 56%, 16%);
    --colored-big-block-title: hsl(var(--tint), 90%, 50%);
    --big-block-title-color: hsl(var(--tint), 56%, 36%);
    --big-block-text-color: rgb(240, 240, 240);
    --small-block-svg-color: hsl(var(--tint), 18%, 78%);
  }
}