@use 'variables' as *;

:root {
  --primary: #{$primary-dark};
  --primary-light: #{$primary-light};
  --primary-dark: #{$primary-dark};
  --background: #{$primary-light};
  --secondary: #{$secondary-light};
  --secondary-light: #{$secondary-light};
  --secondary-dark: #{$secondary-dark};
  --tertiary: #{$tertiary};
  --tertiary-dark: #{$tertiary-dark};
  --tertiary-light: #{$tertiary-light};
  --stroke: #{$stroke};
}

@media (prefers-color-scheme: light) {
  :root {
    --primary: #{$primary-dark};
    --secondary: #{$secondary-light};
    --background: #{$primary-light};
    --shadow: #{$primary-dark};
  }
}
@media (prefers-color-scheme: dark) {
  :root {
    --primary: #{$primary-light};
    --secondary: #{$secondary-dark};
    --background: #{$primary-dark};
    --shadow: #{$stroke};
  }
}

.light-scheme {
  --primary: #{$primary-dark};
  --secondary: #{$secondary-light};
  --tertiary: #{$tertiary};
  --background: #{$primary-light};
  --shadow: #{$primary-dark};
}

.dark-scheme {
  --primary: #{$primary-light};
  --secondary: #{$secondary-dark};
  --tertiary: #{$tertiary-dark};
  --background: #{$primary-dark};
  --shadow: #{$stroke};
}
