@use 'sass:color';

@use '../mastodon/functions' with (
  $darken-multiplier: 1,
  $lighten-multiplier: 1
);

$black: #000;
$white: #fff;
$blurple-500: #51cf66;
$blurple-600: #40c057;
$blurple-400: #69db7c;

$success-green: #51cf66;
$error-red: #ff6b6b;
$warning-red: #ff8787;

$ui-base-color: #0d1f12;
$ui-base-lighter-color: #1a3320;
$ui-primary-color: #d3e5d8;
$ui-secondary-color: #a8c5af;
$ui-highlight-color: $blurple-500;

$ui-button-color: $white;
$ui-button-background-color: $blurple-500;
$ui-button-focus-background-color: $blurple-600;
$ui-button-focus-outline-color: $blurple-400;

$ui-button-secondary-color: $blurple-500;
$ui-button-secondary-border-color: $blurple-500;
$ui-button-secondary-focus-color: $blurple-400;

$ui-button-tertiary-color: $blurple-400;
$ui-button-tertiary-border-color: $blurple-400;
$ui-button-tertiary-focus-background-color: $blurple-600;
$ui-button-tertiary-focus-color: $white;

$ui-button-destructive-background-color: $error-red;
$ui-button-destructive-focus-background-color: #fa5252;

$primary-text-color: $white;
$darker-text-color: #8b9a8f;
$dark-text-color: #c5e0cc;
$secondary-text-color: $ui-secondary-color;
$highlight-text-color: color.scale($blurple-500, $lightness: 8%);
$action-button-color: $ui-base-lighter-color;
$passive-text-color: #fcc419;
$active-passive-text-color: $success-green;

$inverted-text-color: $ui-base-color;
$lighter-text-color: $ui-base-lighter-color;
$light-text-color: $ui-primary-color;