//// Color scheme

// Primary Brand Colors
$blue-dark: #0a3055;      // Base brand color for background
$blue: #0277bd;           // CTAs
$green: #67a509;          // Tick icons; Buttons in the checkout
$green-dark: #487306;     // Active state of button-action

// Additional colors
$green-light: #9acd32;    // To denote 'new’; Only used as a background
$light-green-wa: #25d366; // WhatsApp background
$yellow: #f7ca18;         // Clearance; Only used as a background
$orange: #ffc439;         // Paypal background
$red: #cf000f;            // Offers
$red-bg: #fdf2f3;         // Equal to red-transparent for cases when rgba usage is prohibited
$app-error: #cf100d;      // For tradePro app notification error
$gray-dark: #3e3e3e;      // Body copy
$gray-border: #d6d6d6;
$gray: #ccc;              // Key-lines - to separate content; Background colour; Card borders
$gray-light: #eee;        // Key-lines - to separate content; Background colour
$gray-lighter: #f4f4f4;
$gray-whiter: #f1f1f1;
$gray-bg: #f8f8f8;        // Menu background colour
$gray-gradient: #e0e0e0;  // tabs gradient gray
$gray-quill: #cececd;
$gray-dim: #656565;
$gray-matt: #515151;
$error-bg: #fcf2f3;       // Error notification background colour
$positive: #8dc63f;       // Positive colour
$negative: #ed1c24;       // Negative colour
$blue-badge: #019ee3;
$usp-icon-color: #1a77bc; // Usp icon color
$line-through: #242424;
$notification-success-bg: rgba(103, 165, 9, .05);;
$notification-failure-bg: rgba(207, 0, 15, .05);;
$notification-warn-bg: rgba(255, 196, 57, .05);;

$footer-gray: #f5f5f5;
$footer-bullet: #c8c8c8;
$footer-copyright: #626262;

$footer-gray: #f5f5f5;
$footer-bullet: #c8c8c8;
$footer-copyright: #626262;

$white: #fff;
$black: #000;
$black-lite: #111;
$gray-gray: #d8d8d8;
$warm-grey: #8b8b8b;
$gray-text: #7f7f7f;
$border-grey: #e5e5e5;
$alice-blue: #eaf1ff;
$blue-darker: #014771;
$blue-darkest: #061c33;
$blue-light: #337a8b;
$blue-wedgewood: #438093;
$blue-ocean: #003058;
$blue-ocean-dark: #0a3054;
$gray-middle: #aaa;

// Colour block colours
$moon-shadow: #658089;
$fawn: #f0ddce;
$copper-twist: #fbc596;
$sweet-clementine: #f89774;
$pewter: #95969b;
$cloud: #ebf6f8;
$bluebird: #84bdce;
$rock-pool: #a4bdc4;
$african-sun: #ee7139;
$poetic-pink: #fcd7d1;
$poached-pear: #dcd056;
$conifer-shade: #71aa77;
$fern: #b5cfb2;
$chinoise: #9fb8b5;
$teal: #478d97;
$peacock-plume: #417372;
$victorian-white: #fefef6;

// Semi-transparent colors
$white-transparent30: rgba(255, 255, 255, .3);
$white-transparent40: rgba(255, 255, 255, .4);
$white-transparent80: rgba(255, 255, 255, .8);
$white-transparent20: rgba(216, 216, 216, .2);
$gray-dark-transparent60: rgba(62, 62, 62, .6);
$gray-dark-transparent75: rgba(65, 65, 65, .75);
$gray-dark-transparent80: rgba(65, 65, 65, .8);
$gray-dark-transparent90: rgba(65, 65, 65, .9);
$black-transparent0: rgba(0, 0, 0, 0);
$black-transparent10: rgba(0, 0, 0, .1);
$black-transparent12: rgba(0, 0, 0, .12);
$black-transparent24: rgba(0, 0, 0, .24);
$black-transparent20: rgba(0, 0, 0, .2);
$black-transparent30: rgba(0, 0, 0, .3);
$black-transparent35: rgba(0, 0, 0, .35);
$black-transparent40: rgba(0, 0, 0, .4);
$black-transparent50: rgba(0, 0, 0, .5);
$black-transparent60: rgba(0, 0, 0, .6);
$black-transparent75: rgba(0, 0, 0, .75);
$black-transparent80: rgba(0, 0, 0, .8);
$blue-transparent20: rgba(2, 119, 189, .2);
$blue-transparent10: rgba(2, 119, 189, .1);
$blue-transparent3: #0277bd52;
$blue-transparent5: rgba(2, 119, 189, .05);
$blue-transparent5-rgb: rgb(242, 248, 251);
$dark-blue-transparent10: rgba(10, 48, 85, .1);
$red-transparent5: rgba(207, 0, 15, .05);
$red-transparent10: rgba(207, 0, 15, .1);
$yellow-transparent5: rgba(247, 202, 24, .05);
$green-transparent5: rgba(103, 165, 9, .05);
$gray-light-transparent35: rgba(204, 204, 204, .35);
$gray-light-transparent0: rgba(216, 216, 216, 0);
$radial-black-gradient: radial-gradient(ellipse closest-corner at 50% 50%, $black 1%, $black-transparent75 100%);
$shadow-gradient: linear-gradient(180deg, $black-transparent30 0%, $gray-light-transparent0 100%);

//// Set bootstrap variables
$body-color: $gray-dark;
$font-family-base: 'Roboto', Helvetica, Arial, sans-serif;
$font-size-base: .875rem;
$font-size-13: .8125rem;
$line-height-base: 1.57142857;
$modal-title-line-height: 2rem;
$modal-header-padding: 1.25rem;
$modal-inner-padding: 0;
$enable-shadows: true;

$tooltip-max-width: 240px;
$tooltip-padding-y: 8px;
$tooltip-padding-x: 10px;
$tooltip-border-radius: 0;
$tooltip-bg: $warm-grey;
$tooltip-font-size: .75rem;
$tooltip-opacity: 1;

$popover-body-padding-y: 0;
$popover-body-padding-x: 0;
$popover-max-width: 320px;
$popover-border-radius: 0;
$popover-box-shadow: 0 2px 10px 0 $black-transparent40;

$link-color: $blue;
$link-decoration: underline;
$link-hover-color: $blue-darker;

$btn-font-weight: 500;
$btn-box-shadow: none;
$btn-focus-box-shadow: none;
$btn-active-box-shadow: none;
$btn-disabled-opacity: .4;
$btn-padding-y: 8px;
$btn-padding-x: 15px;
$btn-line-height: $line-height-base;
$btn-border-radius: 3px;
$btn-transition: none;
$btn-focus-width: 0;

//// z-indexes
$main-nav-overlay: 9;
$offer-banner: 10;
$popover: 100;
$header: 101;
$header-search: 102;
$nav: 100;
$nav-mobile: 101;
$back-to-top: 1000;
$cookies-policy: 1001;
$offer-banner-stuck: 1030;

$deep-red: #8a424f;
$deep-green: #4b6b36;
$deep-blue: #2f6370;

$virid-darker: #205c56;
$virid-darkest: #00857c;
$darker-blue: #343f49;

$purple-icon: #8b4451;
$teal-icon: #155c6b;
$green-icon: #4b6b38;
$brown-icon: #7b6406;
$lemon-icon: #aeb277;

//Bootstrap-extraction
$font-weight-light:           300 !default;
$font-weight-normal:          400 !default;
$font-weight-bold:            700 !default;
$font-weight-base:            $font-weight-normal !default;
$small-font-size:             80% !default;
$font-size-lg:                ($font-size-base * 1.25) !default;
$font-size-sm:                ($font-size-base * .875) !default;
$body-bg:                   $white !default;
$component-active-color:      $white !default;
$spacer: 1rem !default;
$headings-margin-bottom:      calc($spacer / 2) !default;
$paragraph-margin-bottom:   1rem !default;
$dt-font-weight:              $font-weight-bold !default;
$link-hover-decoration:     underline !default;
$table-cell-padding:          .75rem !default;
$gray-600: #6c757d !default;
$text-muted:                  $gray-600 !default;
$headings-font-family:        inherit !default;
$headings-font-weight:        500 !default;
$headings-line-height:        1.2 !default;
$headings-color:              inherit !default;
$h1-font-size:                $font-size-base * 2.5 !default;
$h2-font-size:                $font-size-base * 2 !default;
$h3-font-size:                $font-size-base * 1.75 !default;
$h4-font-size:                $font-size-base * 1.5 !default;
$h5-font-size:                $font-size-base * 1.25 !default;
$h6-font-size:                $font-size-base !default;
$lead-font-size:              ($font-size-base * 1.25) !default;
$lead-font-weight:            300 !default;
$primary:       $blue !default;
$component-active-bg:         $primary !default;
$line-height-sm:              1.5 !default;
$line-height-lg:              1.5 !default;
$display-line-height:         $headings-line-height !default;
$hr-margin-y:                 $spacer !default;
$hr-border-color:             rgba($black, .1) !default;
$border-width:                1px !default;
$hr-border-width:             $border-width !default;
$enable-grid-classes:       true !default;
$grid-gutter-width:           30px !default;
$container-max-widths: (sm: 540px, md: 720px, lg: 960px, xl: 1140px) !default;
$grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px) !default;
$grid-columns:                12 !default;

$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #6c757d !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;

$input-btn-padding-y:         .375rem !default;
$input-btn-padding-x:         .75rem !default;
$input-btn-line-height:       $line-height-base !default;

$input-btn-focus-width:       .2rem !default;
$input-btn-focus-color:       rgba($component-active-bg, .25) !default;
$input-btn-focus-box-shadow:  0 0 0 $input-btn-focus-width $input-btn-focus-color !default;

$input-btn-padding-y-sm:      .25rem !default;
$input-btn-padding-x-sm:      .5rem !default;
$input-btn-line-height-sm:    $line-height-sm !default;

$input-btn-padding-y-lg:      .5rem !default;
$input-btn-padding-x-lg:      1rem !default;
$input-btn-line-height-lg:    $line-height-lg !default;

$input-btn-border-width:      $border-width !default;

$border-radius:               .25rem !default;
$border-radius-lg:            .3rem !default;
$border-radius-sm:            .2rem !default;

$enable-rounded:            true !default;
$enable-transitions:        true !default;
$enable-gradients:          false !default;

$btn-border-width:            $input-btn-border-width !default;
$theme-colors: () !default;
$btn-link-disabled-color:     $gray-600 !default;
$btn-padding-y:               $input-btn-padding-y !default;
$btn-padding-x:               $input-btn-padding-x !default;

$btn-padding-y-sm:            $input-btn-padding-y-sm !default;
$btn-padding-x-sm:            $input-btn-padding-x-sm !default;
$btn-line-height-sm:          $input-btn-line-height-sm !default;

$btn-padding-y-lg:            $input-btn-padding-y-lg !default;
$btn-padding-x-lg:            $input-btn-padding-x-lg !default;
$btn-line-height-lg:          $input-btn-line-height-lg !default;

$btn-border-radius:           $border-radius !default;
$btn-border-radius-lg:        $border-radius-lg !default;
$btn-border-radius-sm:        $border-radius-sm !default;

$input-padding-y-sm:                    $input-btn-padding-y-sm !default;
$input-padding-x-sm:                    $input-btn-padding-x-sm !default;

$btn-block-spacing-y:         .5rem !default;

$transition-fade:             opacity .15s linear !default;
$transition-collapse:         height .35s ease !default;

// Close

$close-font-size:                   $font-size-base * 1.5 !default;
$close-font-weight:                 $font-weight-bold !default;
$close-color:                       $black !default;
$close-text-shadow:                 0 1px 0 $white !default;

// Modal

$zindex-modal-backdrop:             1040 !default;
$zindex-modal:                      1050 !default;
$modal-inner-padding:         1rem !default;
$modal-dialog-margin:         .5rem !default;
$modal-dialog-margin-y-sm-up: 1.75rem !default;
$modal-title-line-height:           $line-height-base !default;
$modal-content-bg:               $white !default;
$modal-content-border-color:     rgba($black, .2) !default;
$modal-content-border-width:     $border-width !default;
$modal-content-box-shadow-xs:    0 .25rem .5rem rgba($black, .5) !default;
$modal-content-box-shadow-sm-up: 0 .5rem 1rem rgba($black, .5) !default;
$modal-backdrop-bg:           $black !default;
$modal-backdrop-opacity:      .5 !default;
$modal-header-border-color:   $gray-200 !default;
$modal-footer-border-color:   $modal-header-border-color !default;
$modal-header-border-width:   $modal-content-border-width !default;
$modal-footer-border-width:   $modal-header-border-width !default;
$modal-header-padding:        1rem !default;
$modal-lg:                          800px !default;
$modal-md:                          500px !default;
$modal-sm:                          300px !default;
$modal-transition:                  transform .3s ease-out !default;

// Popovers

$zindex-popover:                    1060 !default;
$popover-font-size:                 $font-size-sm !default;
$popover-bg:                        $white !default;
$popover-max-width:                 276px !default;
$popover-border-width:              $border-width !default;
$popover-border-color:              rgba($black, .2) !default;
$popover-border-radius:             $border-radius-lg !default;
$popover-box-shadow:                0 .25rem .5rem rgba($black, .2) !default;
$popover-header-bg:                 darken($popover-bg, 3%) !default;
$popover-header-color:              $headings-color !default;
$popover-header-padding-y:          .5rem !default;
$popover-header-padding-x:          .75rem !default;
$popover-body-color:                $body-color !default;
$popover-body-padding-y:            $popover-header-padding-y !default;
$popover-body-padding-x:            $popover-header-padding-x !default;
$popover-arrow-width:               1rem !default;
$popover-arrow-height:              .5rem !default;
$popover-arrow-color:               $popover-bg !default;
$popover-arrow-outer-color:         fade-in($popover-border-color, .05) !default;


$border-color:                $gray-300 !default;

$zindex-dropdown:                   1000 !default;
$zindex-sticky:                     1020 !default;
$zindex-fixed:                      1030 !default;
$zindex-modal-backdrop:             1040 !default;
$zindex-modal:                      1050 !default;
$zindex-tooltip:                    1070 !default;
$zindex-share:                      1 !default;

// This variable affects the `.h-*` and `.w-*` classes.
$sizes: () !default;
$sizes: map-merge((25: 25%, 50: 50%, 75: 75%, 100: 100%), $sizes);

// Spacing
//
// Control the default styling of most Bootstrap elements by modifying these
// variables. Mostly focused on spacing.
// You can add more entries to the $spacers map, should you need more variation.

// stylelint-disable
$spacer: 1rem !default;
$spacers: () !default;
$spacers: map-merge((0: 0, 1: ($spacer * .25), 2: ($spacer * .5), 3: $spacer, 4: ($spacer * 1.5), 5: ($spacer * 3)), $spacers);

// Bootstrap Printing checked
$print-page-size:                   a3 !default;
$print-body-min-width:              map-get($grid-breakpoints, 'lg') !default;
$enable-print-styles:       true !default;


//account-families
$ac-border-radius: 10px;

$green-haze: #009640;
$green-apple: #52ae32;
$yellow-green: #85d50c;
$rio-grande: #c8d400;
$yellow-turbo: #ffed00;
$yellow-selective: #fbba00;
$christine: #ec6608;
$monza: #e30613;
$downriver: #0c3153;
$rose-pink: #ff858d;
