/****************************************************
   COLORS
****************************************************/
// tint-color() and shade-color() needs this import
@use "bootstrap/scss/functions" as *;

$accent-100: #ffe2d4 !default;
$accent-300: #ffa273 !default;
$accent-500: #ff854a !default;
$accent-700: #f2580c !default;
$accent-900: #e6540b !default;

$brand-rgb: 0,64,191;
$brand-100: #c7daff;
$brand-300: #0055ff;
$brand-500: #0040bf; /* brand rgb */

$secondary-100: #e8edff;
$secondary-200: #ddecff;   /* used by facet's caps */
$secondary-300: #cfdaff;
$secondary-500: #87a3ff;

$bg-color: #E5E5E5;
$blue-hover: $accent-500;
$blue-rgb: $brand-rgb;
$blue: $brand-500;
$blue-selection: $secondary-100;
$blue-focus: $secondary-200;

$white: #fff;
$white-2: #F1F1F1;
$grey-100: #d3d3d3;
$grey-200: #c4c4c4;
$grey-300: #bcbcbc;
$grey-400: #a4a4a4;
$grey-500: #9a9a9a;
$grey-600: #6c6c6c;
$black: #000;


$blue-100: tint-color($blue, 80%) !default;
$blue-200: tint-color($blue, 60%) !default;
$blue-300: tint-color($blue, 40%) !default;
$blue-400: tint-color($blue, 20%) !default;
$blue-500: $blue !default;
$blue-600: shade-color($blue, 20%) !default;
$blue-700: shade-color($blue, 40%) !default;
$blue-800: shade-color($blue, 60%) !default;
$blue-900: shade-color($blue, 80%) !default;


// darker colors
$darker-blue: #1458b1;
$darker-green: #428245;
$darker-red: #ae2c2c;

$body-text-grey: #4a4a4a;
$body-text-grey-lighter: tint-color($body-text-grey, 20%) !default;
$body-text-grey-darker: shade-color($body-text-grey, 20%) !default;

$info-1: #5bc0de;
$info-2: #c8e7f2;

$success-1: #52a756;
$success-2: #c6e2c7;

$error-1: #dd3938;

$warning-1: #f5e1c6;
$warning-2: #f0ad4e;

$facet-stripped-odd-bg: #f6f6f6;
$facet-stripped-even-bg: #fbfbfb;