/**
 * Color tokens
 *
 * These are the values that express the colors of the design system.
 */

@use 'sass:color' as Color;

$blue: #6666ff; // primary
$primary: #6666ff;
$blue__alt: #5555c8;
$blue-alt: #5555c8;
$blue--light: #edebff;
$blue--light__alt: Color.adjust(#bab9c8, $lightness: 15%);
$blue--lightest: #f2f5fa;
$blue--lightest__alt: Color.adjust(#f2f5fa, $lightness: -5%);

$primary-hue-04: #8282fc;
$primary-hue-01: #d2d2f1;

$red: #ff002f;
$red__alt: Color.adjust($red, $lightness: -10%);

$white: #ffffff;
$grey: #7d7a96;
$grey--light: #f2f2fa;
$black: #050038;

$shadow: #9b99b0;

:export {
  blue: #6666ff; // primary
  primary: #6666ff;
  blue__alt: #5555c8;
  blue--light: #edebff;
  blue--light__alt: Color.adjust(#bab9c8, $lightness: 15%);
  blue--lightest: #f2f5fa;
  blue--lightest__alt: Color.adjust(#f2f5fa, $lightness: -5%);

  primary-hue-04: #8282fc;
  primary-hue-01: #d2d2f1;

  red: #ff002f;
  red__alt: Color.adjust($red, $lightness: -10%);

  white: #ffffff;
  grey: #7d7a96;
  grey--light: #f2f2fa;
  black: #050038;

  shadow: #9b99b0;
}