@use "colors";
@use "sass:color";

@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};
  --primary-lighter: #{color.adjust(colors.$blue, $lightness: 25%)};

  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;
  }
}

@media (prefers-color-scheme: light) {
  html {
    @include rebase(
      colors.$base3,
      colors.$base2,
      colors.$base1,
      colors.$base0,
      colors.$base00,
      colors.$base01,
      colors.$base02,
      colors.$base03
    );
  }
}

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);
  }
}
