// stylelint-disable scss/dollar-variable-pattern

// ===
// Theme
// ===
$color-primary: #51B0CA;
$color-primary-hover: #51B0CA;
$color-primary-dark: #3695b0;
$color-primary-light: #76c1d5;
$color-secondary: #EDAF2A;
$color-secondary-dark: #d39612;
$color-secondary-light: #f1c15b;
$color-blue: #D9F0F8;
$color-blue-dark: #1B2B55;
$color-green: #55E8C0;
$color-light: rgba(#D8E0E5, 0.2);
$color-blue-light: #F8FCFE;
$color-text: #202930;

// ===
// Grayscale
// ===
$color-gray-1: #202930;
$color-gray-2: #687580;
$color-gray-3: #BBC3C9;
$color-gray-4: #D8E0E5;

// ===
// Line
// ===
$color-line: #D6D6D6;
$color-line-2: #C6C6BB;
$color-line-3: #C6C6BB;

// ===
// State
// ===
$color-success: #12C494;
$color-warning: #DD954E;
$color-danger: #F25555;
$color-info: #909399;
$color-complete: #0A89AF;

// ===
// Body
// ===
$color-body: $color-gray-1;
$color-bg-body: #FFF;

// ===
// Body
// ===
$color-bg-default: transparent;

// ===
// Section
// ===
// default section background tone (used by banner, service section, etc.)
$color-section-bg: $color-blue;

// ===
// Color
// ===
$color-theme-map-base: (
        "primary": $color-primary,
        "primary-dark": $color-primary-dark,
        "primary-light": $color-primary-light,
        "secondary": $color-secondary,
        "secondary-dark": $color-secondary-dark,
        "secondary-light": $color-secondary-light,
        "blue": $color-blue,
        "blue-dark": $color-blue-dark,
        "green": $color-green,
        "gray-1": $color-gray-1,
        "gray-2": $color-gray-2,
        "gray-3": $color-gray-3,
        "gray-4": $color-gray-4,
        "white": #FFF,
        "success": $color-success,
        "warning": $color-warning,
        "danger": $color-danger,
        "info": $color-info,
        "complete": $color-complete,
        "transparent": transparent,
);

$color-theme-map: $color-theme-map-base;

$color-autofill: lighten($color-primary, 40%);