// ==========================================================================
// Mapped colors
// Color variables based on their function or role, to see the color values
// see _colorsRaw.scss
// ==========================================================================
$vl-page-bg: $vl-white !default;

// ================================
// Text colors
// ================================
$vl-text-color: $vl-black !default;
$vl-alt-text-color: $vl-secondary-blue !default;
$vl-sub-text-color: $vl-shade-dark !default;
$vl-placeholder-color: $vl-shade-medium !default;
$vl-icon-color: $vl-shade-medium !default;

// ================================
// Default widely used colors
// ================================
$vl-accent-color: $vl-white-blue-hover !default;
$vl-action-color: $vl-secondary-blue !default;
$vl-action-fg-color: $vl-white !default;
$vl-action-hover-color: $vl-primary-blue-hover !default;
$vl-action-active-color: $vl-primary-blue-hover !default;
$vl-action-active-border-color: $vl-primary-blue !default;
$vl-action-text-color: $vl-primary-blue !default;
$vl-action-text-hover-color: $vl-secondary-blue !default;
$vl-action-text-active-color: $vl-secondary-blue !default;
$vl-action-secondary-color: $vl-secondary-blue !default;
$vl-action-tertiary-color: $vl-shade-light !default;
$vl-action-tertiary-hover-color: darken($vl-shade-light, 20%) !default;
$vl-action-fourth-color: $vl-validation-green !default;
$vl-action-fourth-hover-color: $vl-validation-green-hover !default;
$vl-accent-fg-color: $vl-white !default;
$vl-border-color: $vl-shade-border !default;
$vl-outline-color: $vl-primary-blue-hover !default;
$vl-form-label-message-color: $vl-shade-medium !default;
$vl-label-color-light: $vl-shade-medium !default;
$vl-porcelain: $vl-white-blue-hover !default;

// ================================
// Backgrounds
// ================================
$vl-alt-bg: $vl-white !default;
$vl-alt-hover-bg: $vl-white-blue-hover !default;
$vl-overlay-bg: rgba($vl-white, 0.8) !default;

// ================================
// States
// ================================
$vl-error-color: $vl-error-red !default;
$vl-error-fg-color: $vl-white !default;
$vl-error-hover-color: $vl-error-red !default;
$vl-error-text-color: $vl-error-red !default;
$vl-error-secondary-color: mix($vl-error-red, $vl-page-bg, 60%) !default;
$vl-warning-color: $vl-bso-orange !default;
$vl-warning-text-color: $vl-secondary-blue !default;
$vl-warning-fg-color: $vl-page-bg !default;
$vl-warning-hover-color: darken($vl-warning-color, 5%) !default;
$vl-warning-secondary-color: $vl-bso-yellow !default;
$vl-success-color: $vl-validation-green !default;
$vl-success-hover-color: $vl-validation-green-hover !default;
$vl-success-fg-color: $vl-validation-green !default;
$vl-success-secondary-color: $vl-validation-green-hover !default;
$vl-success-text-color: $vl-validation-green !default;
$vl-bordered-content-border-color: $vl-alt-bg !default;
$vl-subtext-color: $vl-alt-text-color !default;
$vl-marker-bg-color: $vl-bso-yellow !default;
$vl-marker-fg-color: $vl-text-color !default;
$vl-progress-color: $vl-pink !default;
$vl-progress-bg-color: $vl-geyser !default;
$vl-progress-bg-alt-color: $vl-ghost !default;

// ================================
// Disabled
// ================================
$vl-disabled-color: $vl-shade-light !default;
$vl-disabled-color-dark: darken($vl-shade-light, 20%);
$vl-disabled-bg-color: mix($vl-shade-border, $vl-white, 50%) !default;
$vl-disabled-text-color: $vl-alt-text-color !default;

// ================================
// Regions
// ================================
$vl-alt-region-bg: $vl-alt-bg !default;