@use 'sass:color';

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

$black: #000;
$white: #fff;

// Rose gold palette
$rose-gold: #c77daa;
$rose-gold-light: #d499b9;
$rose-gold-dark: #b0608e;

$blurple-500: $rose-gold;
$blurple-600: $rose-gold-dark;
$blurple-400: $rose-gold-light;

$success-green: #6dbf8a;
$error-red: #e05757;
$warning-red: #ff6b6b;

$ui-base-color: #faf8f5;
$ui-base-lighter-color: #ffffff;
$ui-primary-color: #373a3c;
$ui-secondary-color: #868e96;
$ui-highlight-color: $rose-gold;

$ui-button-color: $white;
$ui-button-background-color: $rose-gold;
$ui-button-focus-background-color: $rose-gold-dark;
$ui-button-focus-outline-color: $rose-gold-light;

$ui-button-secondary-color: $rose-gold;
$ui-button-secondary-border-color: $rose-gold;
$ui-button-secondary-focus-color: $rose-gold-dark;

$ui-button-tertiary-color: $rose-gold-dark;
$ui-button-tertiary-border-color: $rose-gold-dark;
$ui-button-tertiary-focus-background-color: $rose-gold;
$ui-button-tertiary-focus-color: $white;

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

$primary-text-color: #2d2f30;
$darker-text-color: #495057;
$dark-text-color: #868e96;
$secondary-text-color: #adb5bd;
$highlight-text-color: $rose-gold-dark;
$action-button-color: #e9ecef;
$passive-text-color: #f59f00;
$active-passive-text-color: $success-green;

$inverted-text-color: $ui-base-color;
$lighter-text-color: #495057;
$light-text-color: #868e96;
$emojis-requiring-inversion: 'chains';