//// Color scheme

// Primary Brand Colors
$blue-dark: #0a3055; // Base brand color for background
$blue: #0277bd; // CTAs
$green: #67a509; // Tick icons; Buttons in the checkout
$polished-pine: #67a589;
$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-dark: #7c0009;
$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-wait: #9d9d9c;
$gray-dim: #656565;
$gray-matt: #515151;
$squant: #666;
$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
$pacific-depths: #004587;
$line-through: #242424;
$ma-white: #f4f9fe;
$blue-satin: #99b5cf;
$notification-success-bg: rgba(103, 165, 9, 0.05);
$notification-failure-bg: rgba(207, 0, 15, 0.05);
$notification-warn-bg: rgba(255, 196, 57, 0.05);

$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;
$light-blue: #e6f1f8;
// 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, 0.3);
$white-transparent40: rgba(255, 255, 255, 0.4);
$white-transparent80: rgba(255, 255, 255, 0.8);
$white-transparent90: rgba(255, 255, 255, 0.9);
$white-transparent20: rgba(216, 216, 216, 0.2);
$gray-dark-transparent60: rgba(62, 62, 62, 0.6);
$gray-dark-transparent75: rgba(65, 65, 65, 0.75);
$gray-dark-transparent80: rgba(65, 65, 65, 0.8);
$gray-dark-transparent90: rgba(65, 65, 65, 0.9);
$black-transparent0: rgba(0, 0, 0, 0);
$black-transparent10: rgba(0, 0, 0, 0.1);
$black-transparent12: rgba(0, 0, 0, 0.12);
$black-transparent24: rgba(0, 0, 0, 0.24);
$black-transparent20: rgba(0, 0, 0, 0.2);
$black-transparent30: rgba(0, 0, 0, 0.3);
$black-transparent35: rgba(0, 0, 0, 0.35);
$black-transparent40: rgba(0, 0, 0, 0.4);
$black-transparent50: rgba(0, 0, 0, 0.5);
$black-transparent60: rgba(0, 0, 0, 0.6);
$black-transparent75: rgba(0, 0, 0, 0.75);
$black-transparent80: rgba(0, 0, 0, 0.8);
$blue-transparent20: rgba(2, 119, 189, 0.2);
$blue-transparent10: rgba(2, 119, 189, 0.1);
$blue-transparent3: rgba(2, 119, 189, 0.32);
$blue-transparent5: rgba(2, 119, 189, 0.05);
$blue-transparent5-rgb: rgb(242, 248, 251);
$dark-blue-transparent10: rgba(10, 48, 85, 0.1);
$red-transparent5: rgba(207, 0, 15, 0.05);
$red-transparent10: rgba(207, 0, 15, 0.1);
$yellow-transparent5: rgba(247, 202, 24, 0.05);
$green-transparent5: rgba(103, 165, 9, 0.05);
$gray-light-transparent35: rgba(204, 204, 204, 0.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: 0.875rem;
$font-size-13: 0.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: 0.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: 0.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
$filters: 8;
$label-z-index: 2;
$circle-z-index: -1;
$main-nav-overlay: 9;
$offer-banner: 10;
$popover-under: 99;
$popover: 100;
$header: 101;
$header-search: 102;
$nav: 100;
$nav-mobile: 101;
$back-to-top: 1000;
$cookies-policy: 1001;
$summary-aside: 1001;
$summary-mobile-bar: 1002;
$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 * 0.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: 0.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, 0.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: 0.375rem !default;
$input-btn-padding-x: 0.75rem !default;
$input-btn-line-height: $line-height-base !default;

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

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

$input-btn-padding-y-lg: 0.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: 0.25rem !default;
$border-radius-lg: 0.3rem !default;
$border-radius-sm: 0.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: 0.5rem !default;

$transition-fade: opacity 0.15s linear !default;
$transition-collapse: height 0.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: 0.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, 0.2) !default;
$modal-content-border-width: $border-width !default;
$modal-content-box-shadow-xs: 0 0.25rem 0.5rem rgba($black, 0.5) !default;
$modal-content-box-shadow-sm-up: 0 0.5rem 1rem rgba($black, 0.5) !default;
$modal-backdrop-bg: $black !default;
$modal-backdrop-opacity: 0.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 0.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, 0.2) !default;
$popover-border-radius: $border-radius-lg !default;
$popover-box-shadow: 0 0.25rem 0.5rem rgba($black, 0.2) !default;
$popover-header-bg: darken($popover-bg, 3%) !default;
$popover-header-color: $headings-color !default;
$popover-header-padding-y: 0.5rem !default;
$popover-header-padding-x: 0.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: 0.5rem !default;
$popover-arrow-color: $popover-bg !default;
$popover-arrow-outer-color: fade-in($popover-border-color, 0.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;
// sass-lint:disable indentation
$sizes: map-merge(
  (
    25: 25%,
    50: 50%,
    75: 75%,
    100: 100%,
  ),
  $sizes
);
// sass-lint:enable indentation
// 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;
// sass-lint:disable indentation
$spacers: map-merge(
  (
    0: 0,
    1: (
      $spacer * 0.25,
    ),
    2: (
      $spacer * 0.5,
    ),
    3: $spacer,
    4: (
      $spacer * 1.5,
    ),
    5: (
      $spacer * 3,
    ),
  ),
  $spacers
);
// sass-lint:enable indentation

// 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;

@import 'colors-semantic';