@use 'sass:color';

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

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

// Cyberpunk neon palette
$neon-pink: #ff00ff;
$neon-cyan: #00ffff;
$neon-yellow: #ffff00;
$neon-green: #39ff14;

$blurple-500: $neon-pink;
$blurple-600: #d900d9;
$blurple-400: #ff33ff;

$success-green: $neon-green;
$error-red: #ff3366;
$warning-red: #ff0066;

$ui-base-color: #0d0d14;
$ui-base-lighter-color: #1a1a2e;
$ui-primary-color: #f0f0f0;
$ui-secondary-color: #a0a0a0;
$ui-highlight-color: $neon-pink;

$ui-button-color: $white;
$ui-button-background-color: $neon-pink;
$ui-button-focus-background-color: $blurple-600;
$ui-button-focus-outline-color: $neon-cyan;

$ui-button-secondary-color: $neon-cyan;
$ui-button-secondary-border-color: $neon-cyan;
$ui-button-secondary-focus-color: $white;

$ui-button-tertiary-color: $neon-yellow;
$ui-button-tertiary-border-color: $neon-yellow;
$ui-button-tertiary-focus-background-color: #cc9900;
$ui-button-tertiary-focus-color: $black;

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

$primary-text-color: $white;
$darker-text-color: #808080;
$dark-text-color: #c0c0c0;
$secondary-text-color: #909090;
$highlight-text-color: $neon-cyan;
$action-button-color: $ui-base-lighter-color;
$passive-text-color: $neon-yellow;
$active-passive-text-color: $neon-green;

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