/* color variables && serato color system */
@use 'basic-colors' as *;
@use 'gray-shades' as *;
@forward 'serato-colors';
// @use 'famous-colors' as *;

// serato brand colors
$serato-primary: indigo;
$serato-secondary: purple;
$serato-complement: $gray-100;

//theme-color-variables
$primary: $serato-primary !default; // brand primary color
$secondary: $serato-secondary !default; // brand secondary color
$success: $green !default;
$info: $cyan !default;
$warning: $yellow !default;
$danger: $red !default;
$light: $gray-200 !default;
$dark: $gray-900 !default;

//theme-colors-map
$theme-colors: (
  'primary': $primary,
  'secondary': $secondary,
  'success': $success,
  'info': $info,
  'warning': $warning,
  'danger': $danger,
  'dark': $dark,
) !default;

//! these need revision!
// These are for internal use only!
// other color classes should have !important flag to override these easily!

// for text on light backgrounds
$serato-text-color: $gray-900;

// for text on dark backgrounds
$serato-text-color--dark: $gray-100;

// for basic styled components
$serato-component-background--light: $serato-complement;

// for text of basic styled components
$serato-component-color--light: $gray-700;

// for backgrounds
$serato-primary-color: $serato-primary;

// for shades and hovers maybe!
$serato-secondary-color: $serato-secondary;

// for shades and shadows
$serato-complement-color: $serato-complement;

$common-color: currentColor; // respect current preference
$parent-color: inherit; // respect parent's preference
$transparent-color: transparent; // respect parent's preference