@use "colors";

@mixin rebase(
    $rebase03,
    $rebase02,
    $rebase01,
    $rebase00,
    $rebase0,
    $rebase1,
    $rebase2,
    $rebase3
  ) {
    --foreground: #{$rebase0};
    --foreground-lighter: #{$rebase1};
    --foreground-lightest: #{$rebase2};
    --background: #{$rebase03};
    --background-lighter: #{$rebase02};
    --primary: #{colors.$blue};
  
    background-color: $rebase03;
    color: $rebase0;
  }
  
  @mixin accentize($accent) {
    a,
    a:active,
    a:visited,
    code.url {
      color: $accent;
    }
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      color: $accent;
    }
  }
  
  html {
    @include rebase(
      colors.$base3,
      colors.$base2,
      colors.$base1,
      colors.$base0,
      colors.$base00,
      colors.$base01,
      colors.$base02,
      colors.$base03
    );
  }
  
  @media (prefers-color-scheme: dark) {
    html {
      @include rebase(
        colors.$base03,
        colors.$base02,
        colors.$base01,
        colors.$base00,
        colors.$base0,
        colors.$base1,
        colors.$base2,
        colors.$base3
      );
    }
  }
  
  html,
  body {
    color: var(--foreground);
    background: var(--background);
  
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      color: var(--foreground-lighter);
      border-color: var(--foreground);
    }
  
    a,
    a:active,
    a:visited {
      color: var(--foreground-lighter);
    }
  }