@use 'sass:color';

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

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

// Ocean palette
$deep-ocean: #0a2342;
$ocean-surface: #1e3a5f;
$seafoam: #48cae4;
$coral: #ff922b;

$blurple-500: $seafoam;
$blurple-600: #22b8cf;
$blurple-400: #90e0ef;

$success-green: #38d9a9;
$error-red: #ff6b6b;
$warning-red: #ffa94d;

$ui-base-color: $deep-ocean;
$ui-base-lighter-color: $ocean-surface;
$ui-primary-color: #d0e1f0;
$ui-secondary-color: #a0c0d9;
$ui-highlight-color: $seafoam;

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

$ui-button-secondary-color: $seafoam;
$ui-button-secondary-border-color: $seafoam;
$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: #7a9cc6;
$dark-text-color: #b8d4eb;
$secondary-text-color: $ui-secondary-color;
$highlight-text-color: color.scale($seafoam, $lightness: 8%);
$action-button-color: $ui-base-lighter-color;
$passive-text-color: $coral;
$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;