$background-color: #f7f7f7;
$text-color: #121212;

$primary-color: #4b9ad3;
$secondary-color: #62a7d9;
$danger-color: #e78f82;
$warning-color: #edb76c;
$success-color: #8de3b1;
$information-color: #90dce7;
$special-color: #dc77e9;

$upvote-color: #67af2b;
$downvote-color: #cf0001;
$fave-color: #c4b246;
$comment-color: #9273d0;
$hide-color: #cf0001;

$tag-default-color: #84dd96;
$tag-error-color: #eb848c;
$tag-rating-color: #9cc6f0;
$tag-origin-color: #b5b0ed;
$tag-character-color: #b6e4ed;
$tag-oc-color: #efaaf2;
$tag-species-color: #e1997a;
$tag-body-type-color: #bcbcbc;
$tag-content-fanmade-color: #e388c2;
$tag-content-official-color: #ebe9b3;
$tag-spoiler-color: #dcb879;

$spoiler-color: #0f0f0f;

@define-mixin tag-color $tagname, $color, $text-percentage: 40, $border-percentage: 15 {
  --tag-$(tagname)-color: $(color);
  --tag-$(tagname)-border-color: hsl(from $color h s calc(l - $border-percentage));
  --tag-$(tagname)-text-color: hsl(from $color h s calc(l - $text-percentage));
}

@define-mixin type-color $type, $color {
  --$(type)-color: $color;
  --$(type)-border-color: hsl(from $color h calc(s - 20) calc(l + 5));
  --$(type)-muted-color: hsl(from $color h calc(s - 7) calc(l - 12));
  --$(type)-dark-color: hsl(from $color h calc(s - 25) calc(l + 20));
  --$(type)-link-color: hsl(from $color h calc(s + 50) calc(l - 47));
}

:root {
  /* Main colors */
  --background-color: $background-color;
  --text-color: $text-color;
  --text-light-color: $background-color;

  /* Link colors */
  --link-color: hsl(from $primary-color h calc(s + 25) calc(l - 25));
  --link-hover-color: $text-color;

  /* Primary color (block backgrounds and such) */
  --primary-color: $primary-color;
  --primary-border-color: hsl(from $primary-color h calc(s + 5) calc(l - 5));
  --primary-muted-color: hsl(from $primary-color h calc(s + 7) calc(l + 20));
  --primary-dark-color: hsl(from $primary-color h calc(s + 20) calc(l + 35));
  --primary-link-color: var(--link-color); /* for consistency */

  /* Secondary color (most buttons) */
  --secondary-color: $secondary-color;
  --secondary-border-color: hsl(from $secondary-color h s calc(l - 45));
  --secondary-muted-color: hsl(from $secondary-color h calc(s + 5) calc(l + 18));
  --secondary-dark-color: hsl(from $secondary-color h calc(s - 5) calc(l + 25));
  --secondary-link-color: hsl(from $secondary-color h s calc(l - 55));

  /* Interaction (vote) colors */
  --upvote-color: $upvote-color;
  --downvote-color: $downvote-color;
  --fave-color: $fave-color;
  --comment-color: $comment-color;
  --hide-color: $hide-color;

  /* Spoiler colors */
  --spoiler-color: $spoiler-color;
  --spoiler-revealed-color: hsl(from $spoiler-color h s calc(l + 20));

  /* The invisible color */
  --invisible-color: #00000000;

  /* Type (information category) colors */
  @mixin type-color success, $success-color;
  @mixin type-color warning, $warning-color;
  @mixin type-color danger, $danger-color;
  @mixin type-color information, $information-color;
  @mixin type-color special, $special-color;

  /* Tag colors */
  @mixin tag-color default, $tag-default-color;
  @mixin tag-color error, $tag-error-color, 37;
  @mixin tag-color rating, $tag-rating-color, 37;
  @mixin tag-color origin, $tag-origin-color, 42;
  @mixin tag-color character, $tag-character-color;
  @mixin tag-color oc, $tag-oc-color, 40;
  @mixin tag-color species, $tag-species-color, 37;
  @mixin tag-color body-type, $tag-body-type-color, 45, 12;
  @mixin tag-color content-fanmade, $tag-content-fanmade-color, 40;
  @mixin tag-color content-official, $tag-content-official-color;
  @mixin tag-color spoiler, $tag-spoiler-color;
}

header {
  /* Apparently people will put me on a cross if
     I don't use Trixie colors, so here you go! */
  background-color: #e2ebf2;
}

/* Sigh... my poor poor pretty CSS... */
.header__search {
  background-color: var(--primary-color);
}

.header__search * {
  color: var(--text-light-color) !important;
}

.input:focus,
.header__search > .input:hover {
  color: var(--text-color) !important;
}