@use 'sass:color';

$brand: #bd1c2b;
$brand--dark: #84141e;
$success: #00a36d;
$notice: #fbc168;
$error: #d93c3f;

$selection: #59a7e8;

// Grayscale
$white: white;
$grey-0: #fafafa;
$grey-1: #f2f2f2;
$grey-2: #ececec;
$grey-3: #dbdbdb;
$grey-4: #a6a6a6;
$grey-5: #9c9c9c; // Fails all WCAG contrast tests; do not use for text on white
$grey-6: #737373; // Passes WCAG AA; Fails WCAG AAA normal/small text contrast
$grey-7: #595959; // This and higher pass all WCAG AA/AAA contrast checks
$grey-8: #3f3f3f;
$grey-9: #202020;
$black: black;

// Typography: TODO refactor when adding typography patterns
$text: $grey-9;
$text--light: $grey-6;
$text--inverted: $grey-1;
// This does not provide enough contrast on white to meet WCAG AA standards,
// and should only be used for disabled interfaces.
$text--disabled: $grey-4;

// Tokenizing colors to their use
$background: $white;
$border: $grey-3;
$focus-outline: $selection;

$link: $brand;
$link--hover: $brand--dark;

$overlay: color.scale($black, $alpha: -50%);
$overlay--light: color.scale($white, $alpha: -50%);
$shadow: color.scale($black, $alpha: -90%);
$shadow--dark: color.scale($black, $alpha: -85%);