/* stylelint-disable color-no-hex, color-hex-length  */

$blue-30: var(--color-blue-30);
$blue-40: var(--color-blue-40);
$blue-50: var(--color-blue-50);
$blue-100: var(--color-blue-100);
$blue-200: var(--color-blue-200);
$blue-300: var(--color-blue-300);
$blue-400: var(--color-blue-400);
$blue-500: var(--color-blue-500);
$blue-600: var(--color-blue-600);
$blue-700: var(--color-blue-700);
$blue-800: var(--color-blue-800);
$blue-900: var(--color-blue-900);
$blue: var(--color-blue-400);

$dark-blue-30: var(--color-dark-blue-30);
$dark-blue-40: var(--color-dark-blue-40);
$dark-blue-50: var(--color-dark-blue-50);
$dark-blue-100: var(--color-dark-blue-100);
$dark-blue-200: var(--color-dark-blue-200);
$dark-blue-300: var(--color-dark-blue-300);
$dark-blue-400: var(--color-dark-blue-400);
$dark-blue-500: var(--color-dark-blue-500);
$dark-blue-600: var(--color-dark-blue-600);
$dark-blue-700: var(--color-dark-blue-700);
$dark-blue-800: var(--color-dark-blue-800);
$dark-blue-900: var(--color-dark-blue-900);
$dark-blue-1000: var(--color-dark-blue-1000);
$dark-blue: var(--color-dark-blue-900);

$grey-30: var(--color-grey-30);
$grey-50: var(--color-grey-50);
$grey-100: var(--color-grey-100);
$grey-200: var(--color-grey-200);
$grey-300: var(--color-grey-300);
$grey-400: var(--color-grey-400);
$grey-500: var(--color-grey-500);
$grey-600: var(--color-grey-600);
$grey-700: var(--color-grey-700);
$grey-800: var(--color-grey-800);
$grey-900: var(--color-grey-900);
$grey: var(--color-grey-300);

$orange-50: var(--color-orange-50);
$orange-100: var(--color-orange-100);
$orange-200: var(--color-orange-200);
$orange-300: var(--color-orange-300);
$orange-400: var(--color-orange-400);
$orange-500: var(--color-orange-500);
$orange-600: var(--color-orange-600);
$orange-700: var(--color-orange-700);
$orange-800: var(--color-orange-800);
$orange-900: var(--color-orange-900);
$orange: var(--color-orange-400);

$green-30: var(--color-green-30);
$green-40: var(--color-green-40);
$green-50: var(--color-green-50);
$green-100: var(--color-green-100);
$green-200: var(--color-green-200);
$green-300: var(--color-green-300);
$green-400: var(--color-green-400);
$green-500: var(--color-green-500);
$green-600: var(--color-green-600);
$green-700: var(--color-green-700);
$green-800: var(--color-green-800);
$green-900: var(--color-green-900);
$green: var(--color-green-200);

$red-30: var(--color-red-30);
$red-40: var(--color-red-40);
$red-50: var(--color-red-50);
$red-100: var(--color-red-100);
$red-200: var(--color-red-200);
$red-300: var(--color-red-300);
$red-400: var(--color-red-400);
$red-500: var(--color-red-500);
$red-600: var(--color-red-600);
$red-700: var(--color-red-700);
$red-800: var(--color-red-800);
$red-900: var(--color-red-900);
$red: var(--color-red-300);

$foreground: var(--color-foreground);
$inverse: var(--color-inverse);

$white: var(--color-white);
$black: var(--color-black);

$yellow-50: var(--color-yellow-50);
$yellow-100: var(--color-yellow-100);
$yellow-200: var(--color-yellow-200);
$yellow-300: var(--color-yellow-300);
$yellow-400: var(--color-yellow-400);
$yellow-500: var(--color-yellow-500);
$yellow-600: var(--color-yellow-600);
$yellow-700: var(--color-yellow-700);
$yellow-800: var(--color-yellow-800);
$yellow-900: var(--color-yellow-900);
$yellow: var(--color-yellow-500);

$overlay-background: var(--color-overlay-background);
$backdrop: var(--color-backdrop);

$ansi-blue-bg: var(--color-ansi-blue-bg);
$ansi-cyan-bg: var(--color-ansi-cyan-bg);
$ansi-yellow-bg: var(--color-ansi-yellow-bg);
$ansi-cyan-fg: var(--color-ansi-cyan-fg);
$ansi-green-fg: var(--color-ansi-green-fg);
$ansi-yellow-fg: var(--color-ansi-yellow-fg);
$ansi-red-fg: var(--color-ansi-red-fg);

$loading-skeleton-base: var(--color-loading-skeleton-base);
$loading-skeleton-stop-1: var(--color-loading-skeleton-gradient-stop-1);
$loading-skeleton-stop-2: var(--color-loading-skeleton-gradient-stop-2);

$gradient-primary-start: #{var(--color-blue-400)};
$gradient-primary-stop: #{var(--color-orange-400)};
$gradient-primary: linear-gradient(90deg, $gradient-primary-start, $gradient-primary-stop);

$gradient-secondary-start: #{var(--color-blue-50)};
$gradient-secondary-stop: #{var(--color-orange-50)};
$gradient-secondary: linear-gradient(90deg, $gradient-secondary-start, $gradient-secondary-stop);

$gradient-light-background: linear-gradient(180deg, rgba(248, 248, 250, 50% /* grey-50 50% */) 0%, $foreground 90%);

$border-color: var(--color-grey-100);
