@import "colors";
@import "variables";

@mixin Base() {
  --primary-500: #{$primary-500};
  --primary-400: #{$primary-400};
  --primary-300: #{$primary-300};
  --primary-200: #{$primary-200};
  --primary-100: #{$primary-100};

  --accent-100: #{$accent-100};
  --accent-200: #{$accent-200};

  --warning: #{$warning};
  --error: #{$error};
  --info: #{$info};
  --success: #{$success};

}

@mixin Light {
  @include Base();

  --text-400: #{$light-theme-text-400};
  --text-300: #{$light-theme-text-300};
  --text-200: #{$light-theme-text-200};
  --text-100: #{$light-theme-text-100};

  --bg-100: #{$light-theme-bg-100};
  --bg-200: #{$light-theme-bg-200};
  --bg-300: #{$light-theme-bg-300};
  --bg-400: #{$light-theme-bg-400};

  --bg-100-nth: #{darken($light-theme-bg-100, $nth-percent)};
  --bg-200-nth: #{darken($light-theme-bg-200, $nth-percent)};

  --bg-100-hover: #{darken($light-theme-bg-100, $hover-percent)};
  --bg-200-hover: #{darken($light-theme-bg-200, $hover-percent)};
}

@mixin Dark {
  @include Base();
  --text-400: #{$dark-theme-text-400};
  --text-300: #{$dark-theme-text-300};
  --text-200: #{$dark-theme-text-200};
  --text-100: #{$dark-theme-text-100};

  --bg-100: #{$dark-theme-bg-100};
  --bg-200: #{$dark-theme-bg-200};
  --bg-300: #{$dark-theme-bg-300};
  --bg-400: #{$dark-theme-bg-400};

  --bg-100-nth: #{lighten($dark-theme-bg-100, $nth-percent)};
  --bg-200-nth: #{lighten($dark-theme-bg-200, $nth-percent)};

  --bg-100-hover: #{lighten($dark-theme-bg-100, $hover-percent)};
  --bg-200-hover: #{lighten($dark-theme-bg-200, $hover-percent)};
}