// This defines theme-specific variables.
@mixin theme-variables($theme) {
  @if $theme =='light' {
    // Light theme colours.
    --primary-color: #cd3731;
  }

  @else if $theme =='dark' {
    // Dark theme colours.
    --primary-color: #e35d5d;
  }
}

// Apply light theme variables by default.
:root {
  @include theme-variables('light');
}

// Apply dark theme variables when dark theme is explicitly set.
[data-theme='dark'] {
  @include theme-variables('dark');
}

// Apply dark theme variables when user's system prefers dark mode
// and the theme is not explicitly set to light.
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    @include theme-variables('dark');
  }
}