// Liberty Theme
// -------------------------------------------------------------------------------------------
// This file contains the theme variables shared
// between modes. This should only include variables
// used to theme the application colors.

// Default Liberty Colors
// -------------------------------------------------------------------------------------------
// Color map should provide
// - base: main color to be used.
// - contrast: Color that will provide readable text against the base color
// - shade: 12% darker version of the base color (mix with black)
// - tint: 10% lighter version of the base color (mix with white)

$primary: #1B2C56 !default;
$primary_darkest: #091328 !default;
$primary_darker: #0A1733 !default;
$primary_dark: #121E3F !default;
$primary_light: #256EC1 !default;
$primary_lighter: #9BC7EE !default;
$primary_lightest: #EEF3F9 !default;
$neutral: #686A6F !default;
$neutral_darkest: #222222 !default;
$neutral_darker: #595B5F !default;
$neutral_light: #909090 !default;
$neutral_lighter: #C6C7C9 !default;
$neutral_lightest: #F1F1F1 !default;
$ruby: #650918 !default;
$official: #C00D27 !default;
$warning: #FFD356 !default;
$error: #E4002B !default;
$success: #00854E !default;
$success_light: #2ECD82 !default;
$mustard: #FFAA33 !default;
$purple: #5E569C !default;
$black: #000000 !default;
$white: #FFFFFF !default;

$colors: (
  primary: (
    base: $primary,
    contrast: #fff,
    shade: get-color-shade($primary),
    tint: get-color-tint($primary)
  ),
  primary_darkest: (
    base: $primary_darkest,
    contrast: #fff,
    shade: get-color-shade($primary_darkest),
    tint: get-color-tint($primary_darkest)
  ),
  primary_darker: (
    base: $primary_darker,
    contrast: #fff,
    shade: get-color-shade($primary_darker),
    tint: get-color-tint($primary_darker)
  ),
  primary_dark: (
    base: $primary_dark,
    contrast: #fff,
    shade: get-color-shade($primary_dark),
    tint: get-color-tint($primary_dark)
  ),
  primary_light: (
    base: $primary_light,
    contrast: #fff,
    shade: get-color-shade($primary_light),
    tint: get-color-tint($primary_light)
  ),
  primary_lighter: (
    base: $primary_lighter,
    contrast: #000,
    shade: get-color-shade($primary_lighter),
    tint: get-color-tint($primary_lighter)
  ),
  primary_lightest: (
    base: $primary_lightest,
    contrast: #000,
    shade: get-color-shade($primary_lightest),
    tint: get-color-tint($primary_lightest)
  ),
  neutral: (
    base: $neutral,
    contrast: #fff,
    shade: get-color-shade($neutral),
    tint: get-color-tint($neutral)
  ),
  neutral_darker: (
    base: $neutral_darker,
    contrast: #fff,
    shade: get-color-shade($neutral_darker),
    tint: get-color-tint($neutral_darker)
  ),
  neutral_darkest: (
    base: $neutral_darkest,
    contrast: #fff,
    shade: get-color-shade($neutral_darkest),
    tint: get-color-tint($neutral_darkest)
  ),
  neutral_light: (
    base: $neutral_light,
    contrast: #000,
    shade: get-color-shade($neutral_light),
    tint: get-color-tint($neutral_light)
  ),
  neutral_lighter: (
    base: $neutral_lighter,
    contrast: #000,
    shade: get-color-shade($neutral_lighter),
    tint: get-color-tint($neutral_lighter)
  ),
  neutral_lightest: (
    base: $neutral_lightest,
    contrast: #000,
    shade: get-color-shade($neutral_lightest),
    tint: get-color-tint($neutral_lightest)
  ),
  ruby: (
    base: $ruby,
    contrast: #fff,
    shade: get-color-shade($ruby),
    tint: get-color-tint($ruby)
  ),
  official: (
    base: $official,
    contrast: #fff,
    shade: get-color-shade($official),
    tint: get-color-tint($official)
  ),
  warning: (
    base: $warning,
    contrast: #000,
    shade: get-color-shade($warning),
    tint: get-color-tint($warning)
  ),
  error: (
    base: $error,
    contrast: #000,
    shade: get-color-shade($error),
    tint: get-color-tint($error)
  ),
  success: (
    base: $success,
    contrast: #fff,
    shade: get-color-shade($success),
    tint: get-color-tint($success)
  ),
  success_light: (
    base: $success_light,
    contrast: #000,
    shade: get-color-shade($success_light),
    tint: get-color-tint($success_light)
  ),
  mustard: (
    base: $mustard,
    contrast: #000,
    shade: get-color-shade($mustard),
    tint: get-color-tint($mustard)
  ),
  "purple": (
    base: $purple,
    contrast: #fff,
    shade: get-color-shade($purple),
    tint: get-color-tint($purple)
  ),
  "black": (
    base: $black,
    contrast: #fff,
    shade: get-color-shade($black),
    tint: get-color-tint($black)
  ),
  "white": (
    base: $white,
    contrast: #000,
    shade: get-color-shade($white),
    tint: get-color-tint($white)
  )
) !default;


// Default Foreground and Background Colors
// -------------------------------------------------------------------------------------------
// Used internally to calculate the default steps
// TODO: @color-mod will remove all of this

$background-color-value: #fff !default;
$background-color-rgb: 255, 255, 255 !default;

$text-color-value: #000 !default;
$text-color-rgb: 0, 0, 0 !default;

$background-color: var(--lu-background-color, $background-color-value) !default;
$text-color: var(--lu-text-color, $text-color-value) !default;

// Default Foreground and Background Step Colors
// -------------------------------------------------------------------------------------------
// Color Steps are used to provide variations in text and background colors of elements.
// Steps move towards their contrasting color.
// For example, $text-color-step-XXX will be $text-color stepping towards $background-color,
// but a $background-color-step-XXX will be $background-color stepping towards $text-color.

$background-color-step-50: var(--lu-color-step-50, mix($text-color-value, $background-color-value, 5%)) !default;
$background-color-step-100: var(--lu-color-step-100, mix($text-color-value, $background-color-value, 10%)) !default;
$background-color-step-150: var(--lu-color-step-150, mix($text-color-value, $background-color-value, 15%)) !default;
$background-color-step-200: var(--lu-color-step-200, mix($text-color-value, $background-color-value, 20%)) !default;
$background-color-step-250: var(--lu-color-step-250, mix($text-color-value, $background-color-value, 25%)) !default;
$background-color-step-300: var(--lu-color-step-300, mix($text-color-value, $background-color-value, 30%)) !default;
$background-color-step-350: var(--lu-color-step-350, mix($text-color-value, $background-color-value, 35%)) !default;
$background-color-step-400: var(--lu-color-step-400, mix($text-color-value, $background-color-value, 40%)) !default;
$background-color-step-450: var(--lu-color-step-450, mix($text-color-value, $background-color-value, 45%)) !default;
$background-color-step-500: var(--lu-color-step-500, mix($text-color-value, $background-color-value, 50%)) !default;
$background-color-step-550: var(--lu-color-step-550, mix($text-color-value, $background-color-value, 55%)) !default;
$background-color-step-600: var(--lu-color-step-600, mix($text-color-value, $background-color-value, 60%)) !default;
$background-color-step-650: var(--lu-color-step-650, mix($text-color-value, $background-color-value, 65%)) !default;
$background-color-step-700: var(--lu-color-step-700, mix($text-color-value, $background-color-value, 70%)) !default;
$background-color-step-750: var(--lu-color-step-750, mix($text-color-value, $background-color-value, 75%)) !default;
$background-color-step-800: var(--lu-color-step-800, mix($text-color-value, $background-color-value, 80%)) !default;
$background-color-step-850: var(--lu-color-step-850, mix($text-color-value, $background-color-value, 85%)) !default;
$background-color-step-900: var(--lu-color-step-900, mix($text-color-value, $background-color-value, 90%)) !default;
$background-color-step-950: var(--lu-color-step-950, mix($text-color-value, $background-color-value, 95%)) !default;
$text-color-step-50: var(--lu-color-step-950, mix($background-color-value, $text-color-value, 5%)) !default;
$text-color-step-100: var(--lu-color-step-900, mix($background-color-value, $text-color-value, 10%)) !default;
$text-color-step-150: var(--lu-color-step-850, mix($background-color-value, $text-color-value, 15%)) !default;
$text-color-step-200: var(--lu-color-step-800, mix($background-color-value, $text-color-value, 20%)) !default;
$text-color-step-250: var(--lu-color-step-750, mix($background-color-value, $text-color-value, 25%)) !default;
$text-color-step-300: var(--lu-color-step-700, mix($background-color-value, $text-color-value, 30%)) !default;
$text-color-step-350: var(--lu-color-step-650, mix($background-color-value, $text-color-value, 35%)) !default;
$text-color-step-400: var(--lu-color-step-600, mix($background-color-value, $text-color-value, 40%)) !default;
$text-color-step-450: var(--lu-color-step-550, mix($background-color-value, $text-color-value, 45%)) !default;
$text-color-step-500: var(--lu-color-step-500, mix($background-color-value, $text-color-value, 50%)) !default;
$text-color-step-550: var(--lu-color-step-450, mix($background-color-value, $text-color-value, 55%)) !default;
$text-color-step-600: var(--lu-color-step-400, mix($background-color-value, $text-color-value, 60%)) !default;
$text-color-step-650: var(--lu-color-step-350, mix($background-color-value, $text-color-value, 65%)) !default;
$text-color-step-700: var(--lu-color-step-300, mix($background-color-value, $text-color-value, 70%)) !default;
$text-color-step-750: var(--lu-color-step-250, mix($background-color-value, $text-color-value, 75%)) !default;
$text-color-step-800: var(--lu-color-step-200, mix($background-color-value, $text-color-value, 80%)) !default;
$text-color-step-850: var(--lu-color-step-150, mix($background-color-value, $text-color-value, 85%)) !default;
$text-color-step-900: var(--lu-color-step-100, mix($background-color-value, $text-color-value, 90%)) !default;
$text-color-step-950: var(--lu-color-step-50, mix($background-color-value, $text-color-value, 95%)) !default;

// Default General Colors
// --------------------------------------------------
$placeholder-text-color: var(--lu-placeholder-color, $text-color-step-600) !default;
$backdrop-color:                         var(--ion-backdrop-color, #000) !default;
$border-color:                           var(--ion-border-color, var(--ion-color-step-150, #c1c4cd)) !default;
$box-shadow-color:                       var(--ion-box-shadow-color, #000) !default;
$overlay-background-color:               var(--ion-overlay-background-color, #fff) !default;