$black-87-opacity: rgba(black, 0.87);
$white-87-opacity: rgba(white, 0.87);
$black-12-opacity: rgba(black, 0.12);
$white-12-opacity: rgba(white, 0.12);
$black-6-opacity: rgba(black, 0.06);
$white-6-opacity: rgba(white, 0.06);

$arw-red: (
  50: #fce4e5,
  100: #f7bbbd,
  200: #f18d91,
  300: #eb5f65,
  400: #e73d44,
  500: #C92428, // Default Close/Alert/Warning color as per Arrow Guidelines v2.4
  600: #e0181f,
  700: #dc141a,
  800: #d81015,
  900: #e31b23, // Hover Button for Close/Alert/Warning color
  A100: #fffafa,
  A200: #ffc7c7,
  A400: #ff9495,
  A700: #ff7a7c,
  contrast: (
    50: $black-87-opacity,
    100: $black-87-opacity,
    200: $black-87-opacity,
    300: $black-87-opacity,
    400: $black-87-opacity,
    500: white,
    600: white,
    700: white,
    800: $white-87-opacity,
    900: $white-87-opacity,
    A100: $black-87-opacity,
    A200: white,
    A400: white,
    A700: white
  )
);

$arw-blue: (
  50: #e0f3fb,
  100: #b3e2f5,
  200: #80ceee,
  300: #7FC1EA, // Button Focus, as per Arrow Design Guidelines v2.4
  400: #26ace1,
  500: #0069AA, // Default Button, as per Arrow Design Guidelines v2.4
  600: #0095d8,
  700: #008bd3,
  800: #0081ce,
  900: #0084D5, // Hover Button, as per Arrow Design Guidelines v2.4
  A100: #edf6ff,
  A200: #baddff,
  A400: #87c4ff,
  A700: #6eb7ff,
  contrast: (
    50: $black-87-opacity,
    100: $black-87-opacity,
    200: $black-87-opacity,
    300: $black-87-opacity,
    400: $black-87-opacity,
    500: white,
    600: white,
    700: white,
    800: $white-87-opacity,
    900: $white-87-opacity,
    A100: $black-87-opacity,
    A200: white,
    A400: white,
    A700: white
  )
);

$arw-green: (
  50: #eaf7e9,
  100: #cceac8,
  200: #aadca4,
  300: #87ce7f,
  400: #6ec463,
  500: #54b948,
  600: #4db241,
  700: #43aa38,
  800: #3aa230,
  900: #299321,
  A100: #d2ffcf,
  A200: #a2ff9c,
  A400: #73ff69,
  A700: #5bff50,
  contrast: (
    50: $black-87-opacity,
    100: $black-87-opacity,
    200: $black-87-opacity,
    300: $black-87-opacity,
    400: $black-87-opacity,
    500: white,
    600: white,
    700: white,
    800: $white-87-opacity,
    900: $white-87-opacity,
    A100: $black-87-opacity,
    A200: $black-87-opacity,
    A400: $black-87-opacity,
    A700: $black-87-opacity
  )
);

$arw-grey: (
  50: #fafafa,
  100: #dedede,
  200: #eeeeee,
  300: #cfcfcf,
  400: #bbbbbb,
  500: #7b7b7b,
  600: #666666,
  700: #424242,
  800: #29272a,
  900: #19171a,
  A100: #ffffff,
  A200: #eeeeee,
  A400: #bdbdbd,
  A700: #616161,
  contrast: (
    50: $black-87-opacity,
    100: $black-87-opacity,
    200: $black-87-opacity,
    300: $black-87-opacity,
    400: $black-87-opacity,
    500: white,
    600: white,
    700: white,
    800: white,
    900: white,
    A100: $black-87-opacity,
    A200: $black-87-opacity,
    A400: $black-87-opacity,
    A700: $white-87-opacity
  )
);

// Background palette for dark themes.
$arw-dark-theme-background: (
  status-bar: black,
  app-bar: map_get($arw-grey, 900),
  background: #303030,
  hover: rgba(white, 0.04),
  card: map_get($arw-grey, 800),
  dialog: map_get($arw-grey, 800),
  disabled-button: $white-12-opacity,
  disabled-text: rgba(white, 0.3),
  solid-button: map-get($arw-grey, 800),
  focused-button: $white-6-opacity,
  selected-button: map_get($arw-grey, 900),
  selected-disabled-button: map_get($arw-grey, 800),
  disabled-button-toggle: black,
  unselected-chip: map_get($arw-grey, 700),
  disabled-list-option: black
);

// Foreground palette for dark themes.
$arw-dark-theme-foreground: (
  base: white,
  divider: $white-12-opacity,
  dividers: $white-12-opacity,
  disabled: rgba(white, 0.3),
  disabled-button: rgba(white, 0.3),
  disabled-text: rgba(white, 0.3),
  hint-text: rgba(white, 0.3),
  secondary-text: rgba(white, 0.7),
  icon: white,
  icons: white,
  text: white,
  slider-min: white,
  slider-off: rgba(white, 0.3),
  slider-off-active: rgba(white, 0.3)
);

// Background palette for light themes.
$arw-light-theme-background: (
  status-bar: map_get($arw-grey, 300),
  app-bar: map_get($arw-grey, 100),
  background: map_get($arw-grey, 50),
  hover: rgba(black, 0.04),
  card: white,
  dialog: white,
  disabled-button: #F0F0F0, // Disabled Button Background as per Arrow Design Guidelines v2.4
  disabled-text: rgba(black, 0.38),
  solid-button: white,
  focused-button: $black-6-opacity,
  selected-button: map_get($arw-grey, 300),
  selected-disabled-button: map_get($arw-grey, 400),
  disabled-button-toggle: map_get($arw-grey, 200),
  unselected-chip: map_get($arw-grey, 300),
  disabled-list-option: map_get($arw-grey, 200)
);

// Foreground palette for light themes.
$arw-light-theme-foreground: (
  base: black,
  divider: $black-12-opacity,
  dividers: $black-12-opacity,
  disabled: rgba(black, 0.38),
  disabled-button: #B3B3B3, // Disabled Button Foreground as per Arrow Design Guidelines v2.4
  disabled-text: rgba(black, 0.38),
  hint-text: rgba(black, 0.38),
  secondary-text: rgba(black, 0.54),
  icon: rgba(black, 0.54),
  icons: rgba(black, 0.54),
  text: rgba(black, 0.87),
  slider-min: rgba(black, 0.87),
  slider-off: rgba(black, 0.26),
  slider-off-active: rgba(black, 0.38)
);