@mixin light-theme-font {
  --font-weight-regular: 400;
	--tracking: -0.006em;
}

@mixin dark-theme-font {
  --font-weight-regular: 300;
	--tracking: 0;
}

/**
 * Palette
 */
 @mixin light-theme {
  color-scheme: light;

  --brand: hsl(22, 60%, 60%);
  --brand-variant: hsl(22, 60%, 50%);
  --primary-accent: hsl(232, 60%, 60%);
  --secondary-accent: hsl(172, 35%, 35%);
  --text1: hsl(22, 96%, 6%);
  --text2: hsl(20, 10%, 30%);
  --surface1: hsl(20, 12%, 95%);
  --surface2: hsl(24, 10%, 90%);
  --surface3: hsl(22, 11%, 85%);
  --surface4: hsl(24, 10%, 80%);
  --img-opacity: 1;
  --shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
	
	@include light-theme-font;
}

@mixin dark-theme {
  color-scheme: dark;

  --brand: hsl(22, 45%, 45%);
  --brand-variant: hsl(22, 45%, 55%);
  --primary-accent: hsl(232, 65%, 65%);
  --secondary-accent: hsl(172, 65%, 65%);
  --text1: hsl(22, 22%, 90%);
  --text2: hsl(20, 10%, 70%);
  --surface1: hsl(24, 0%, 10%);
  --surface2: hsl(23, 0%, 15%);
  --surface3: hsl(24, 0%, 20%);
  --surface4: hsl(23, 0%, 25%);
  --img-opacity: .8;
  --shadow: 0 0 0 rgba(0, 0, 0, 0);

	@include dark-theme-font;
}


:root {
  @include light-theme;
}

@media (prefers-color-scheme: dark) {
  :root {
    @include dark-theme;
  }
}

[data-theme="light"] {
  @include light-theme;
}

[data-theme="dark"] {
  @include dark-theme;
}