//==================================
//COLOR VARIABLES
//==================================
//colors
//primary
$reddish-orange: #e9530e; //infobip brand color
$blood-orange: #fd4500;
$mango: #f7b334;

$blue-green: #148997; //infobip brand color
$silver-green: #b8dbd2; //infobip brand color
$tealish: #26cad3; //infobip brand color

$dark: #263746; //infobip brand color
$dark-A: #1a252f; //infobip brand color
$slate: #3c5163;

$pale-blue: #d5f1f3;
$light-grey-blue: #8ed3da;
$ice: #e5f6eb;
$ice-blue: #eefafb;
$white: #ffffff;
$bluey-grey: #93a0a9;
$pale-grey: #f8faff;

$ocean-green-06: rgba(63, 162, 121, 0.06);
$cornflower-blue-08: rgba(81, 114, 221, 0.08);

//colors - re-assigning
$primary-color: $blood-orange;
$secondary-color: $tealish;
$tertiary-color: $dark;

//colors - gradients

$light-grey-blue-gradient: linear-gradient(to bottom, #ffffff, $pale-grey);
$light-grey-white-gradient: linear-gradient(to top, #ffffff, $pale-grey);

//==================================
//BUTTONS
//==================================
//color
$primary-button-color: $white;
$secondary-button-color: $white;
//background color
$primary-button-bg: $blood-orange;
$primary-button-bg-hover: $reddish-orange;

$secondary-button-bg: $dark;
$secondary-button-bg-hover: $slate;
//border radius
$button-border-radius: 7px;
$small-button-border-radius: 4px;
//box shadow
$primary-button-box-shadow-hover: 2px 2px 16px 0 #f4c9b9;
$secondary-button-box-shadow-hover: 2px 2px 16px 0 #a3b6c7;

//==================================
//TAGS
//==================================
//color
$primary-tag-color: $white;
$secondary-tag-color: $white;
$tertiary-tag-color: $blue-green;
$quaternary-tag-color: $white;
$fifth-tag-color: $dark;
//background color
$primary-tag-bg: $blood-orange;
$secondary-tag-bg: $tealish;
$tertiary-tag-bg: transparent;
$quaternary-tag-bg: $mango;
$fifth-tag-bg: $white;
//border
$primary-tag-border-color: transparent;
$secondary-tag-border-color: transparent;
$tertiary-tag-border-color: $pale-blue;
$quaternary-tag-border-color: transparent;
$fifth-tag-border-color: transparent;
//shadow
$button-shadow: 0 8px 23px $cornflower-blue-08;
$tag-shadow: 0 5px 15px $ocean-green-06;
//border radius
$tag-border-radius: 3px;

//==================================
//TEXT
//==================================
$title-color: $dark;
$text-color: $slate;
$quote-color: $mango;

//==================================
//LINK
//==================================
$link-border-bg-color: $ice;
$link-border-bg-color-hover: $blood-orange;
$link-inactive: $slate;
$link-active: $dark;
$link-active-border-color: $mango;

//==================================
//FORMS
//==================================
$form-input-border-radius: 7px;
$form-input-bg: $white;
$form-input-shadow: 0 2px 10px 0 rgba(130, 155, 227, 0.09);
$form-input-color: $dark;
$form-input-placeholder-color: $bluey-grey;

//==================================
//CONTACT CTA
//==================================
$contact-cta-bg: $ice-blue;
$contact-cta-input-shadow: 10px 4px 40px 0 rgba(20, 137, 151, 0.2);

//==================================
//FOOTER
//==================================
$footer-bg-gradient: $light-grey-blue-gradient;

//==================================
//SECTIONS
//==================================
$section-light-bg-gradient: $light-grey-blue-gradient;
$section-light-bg-gradient--invert: $light-grey-white-gradient;

//==================================
//LISTS
//==================================
$inline-list-bullet-bg: $light-grey-blue;
$logo-list-shadow: 0 8px 20px 0 rgba(63, 86, 162, 0.08);

//==================================
//CARD
//==================================
$navigation-box-shadow: 0 4px 6px rgba(130, 155, 227, 0.09);
$card-border-radius: 7px;
$card-icon-border-radius: 47px;
$card-border-radius--code-output: 6px;
$card-category-color: $blue-green;
$card-border-radius--article: 12px;
$card-box-shadow: 0 4px 6px rgba(130, 155, 227, 0.09);
$card-box-shadow--article: 0 16px 30px rgba(130, 155, 227, 0.15);
$card-box-shadow--code-output: 0 2px 10px rgba(130, 155, 227, 0.09);
$card-icon-box-shadow: 0 4px 10px rgba(130, 155, 227, 0.09);

//==================================
//BANNER
//==================================
$banner-border-radius: 10px;
$banner-box-shadow: 0 16px 30px rgba(130, 155, 227, 0.16);
$banner-box-shadow--active: 0 0px 0px rgba(130, 155, 227, 0);

//==================================
//TESTIMONIAL
//==================================
$testimonial-border-radius: 13px;
$testimonial-box-shadow: 0 2px 30px rgba(130, 155, 227, 0.2);

//==================================
//CODE EDITOR
//==================================
$code-editor-color: $white;
$code-editor-bg: $dark-A;


$settings-colors: (
    "default": (
        "white": #ffffff,
        "black": #000000,
    ),
    "html": (
        "text": $text-color,
        "background": #ffffff,
    ),
    "primary": (
        "white": #ffffff,
        "black": #000000,
    ),
    "variations": (
        "black-0": rgba(#000000, 0),
        "black-10": rgba(#000000, 0.1),
        "black-20": rgba(#000000, 0.2),
        "black-30": rgba(#000000, 0.3),
        "black-40": rgba(#000000, 0.4),
        "black-50": rgba(#000000, 0.5),
        "black-60": rgba(#000000, 0.6),
        "black-70": rgba(#000000, 0.7),
        "black-80": rgba(#000000, 0.8),
        "black-90": rgba(#000000, 0.9),
        "black-100": rgba(#000000, 1),
    ),
    "form": (
        "error-red": #fa0000,
        "success-green": #6dd348,
    ),
);

$transparent: rgba(255,255,255,0);

//
//DEV helpers
$temp-placeholder: $bluey-grey;