// Overrides for the following:
// vendor/magento/magento2-base/lib/web/css/source/lib/variables/_colors.less

//
//  Colors
//  ---------------------------------------------

// @DO - Custom Colors
@do-primary-color: @djo-blue;
@do-secondary-color: @djo-gray;

@djo-blue: #0b56c2;
@djo-blue-light: lighten(@djo-blue, 10%);
@djo-blue-dark: #0b408b;
@djo-gray: #4f4a47;
@djo-gray-light: #878583;
@djo-gray-lighter: #d9d9d9;
@djo-gray-lightest: #f8f8f8;
@djo-gray-dark: darken(@djo-gray, 10%);
@djo-header-border-color: #dbdfe1;
@djo-orange: #ff9500;
@djo-orange-dark: darken(@djo-orange, 10%);

@djo-toolbar-bg-color: #d7d7d7;
@djo-toolbar-border-color: #b4b4b4;
@djo-toolbar-sorter-border-color: #4f4a47;

// @DO - This controls a lot of text colors on the site
@active__color: #00AEEF;
@primary__color: #4f4a47;


// Overrides for the following:
// vendor/magento/magento2-base/lib/web/css/source/lib/variables/_actions-toolbar.less

//
//  Actions Toolbar
//  ---------------------------------------------

// Overrides for the following:
// vendor/magento/magento2-base/lib/web/css/source/lib/variables/_breadcrumbs.less

//
//  Breadcrumbs
//  ---------------------------------------------

@breadcrumbs__font-size: @font-size__base;
@breadcrumbs__container-margin: 40px 0 50px;

// @DO - Remove Luma icon between breadcrumbs and replace with '//'
@breadcrumbs-separator__symbol: '//';
@breadcrumbs-separator__color: @djo-gray-light;

@breadcrumbs-icon__use: false;

// Current page
@breadcrumbs-current__color: @djo-gray;
@breadcrumbs-current__font-weight: 700;

// Link
@breadcrumbs-link__color: @link__color;
@breadcrumbs-link__text-decoration: @link__text-decoration;

@breadcrumbs-link__visited__color: @link__visited__color;
@breadcrumbs-link__visited__text-decoration: @link__visited__text-decoration;

@breadcrumbs-link__hover__color: @link__hover__color;
@breadcrumbs-link__hover__text-decoration: @link__hover__text-decoration;

@breadcrumbs-link__active__color: @link__active__color;
@breadcrumbs-link__active__text-decoration: @link__active__text-decoration;


// Overrides for the following:
// vendor/magento/magento2-base/lib/web/css/source/lib/variables/_buttons.less

//
//  Buttons
//  ---------------------------------------------

//  Font style
@button__font-size: 1.2rem;
@button__font-weight: 700;
@button__line-height: 1;
@button__padding: 14px 18px;

// Secondary button
@button__color: @color-white;
@button__background: @djo-gray;
@button__border: 1px solid @button__background;

@button__hover__color: @button__color;
@button__hover__background: @djo-gray-dark;
@button__hover__border: 1px solid @button__hover__background;

@button__active__color: @button__hover__color;
@button__active__background: @button__hover__background;
@button__active__border: @button__hover__border;

// Primary button
@button-primary__background: @djo-blue;
@button-primary__border: 1px solid @djo-blue;
@button-primary__color: @color-white;

@button-primary__hover__background: @djo-blue-dark;
@button-primary__hover__border: 1px solid @button-primary__hover__background;
@button-primary__hover__color: @button-primary__color;

@button-primary__active__background: @button-primary__hover__background;
@button-primary__active__border: @button-primary__hover__border;
@button-primary__active__color: @button-primary__color;

@button__border-radius: 30px;

// Large button
// @button__padding__l: 20px 24px;

// Small button
// @button__padding__s: 8px 12px;


// Overrides for the following:
// vendor/magento/magento2-base/lib/web/css/source/lib/variables/_components.less

//
//  Components (Modals)
//  ---------------------------------------------


// Overrides for the following:
// vendor/magento/magento2-base/lib/web/css/source/lib/variables/_dropdowns.less

//
//  Dropdowns
//  ---------------------------------------------


// Overrides for the following:
// vendor/magento/magento2-base/lib/web/css/source/lib/variables/_forms.less

//
//  Forms
//  ---------------------------------------------

// Form elements inputs default variables
@form-element-input__border-color: #b4b4b4;
@form-element-input__font-size: 1.4rem;
@form-element-input__color: @djo-gray;

// Placeholder
@form-element-input-placeholder__color: @djo-gray-light;

// Select
@select__border: @form-element-input__border;
@select__border-radius: @form-element-input__border-radius;
@select__height: @form-element-input__height;
@select__font-size: @form-element-input__font-size;
// @DO - Fix unequal top and bottom padding on select elements
@select__padding: 5px @indent__s 5px;

// Fieldset
@form-fieldset__margin: 0 0 @indent__m;

// Field
@form-field__vertical-indent: @indent__s;

// Form field label
@form-field-type-label-block__margin: 0 2px 2px;


// Overrides for the following:
// vendor/magento/magento2-base/lib/web/css/source/lib/variables/_icons.less

//
//  Icons
//  ---------------------------------------------


// Overrides for the following:
// vendor/magento/magento2-base/lib/web/css/source/lib/variables/_layout.less

//
//  Layout
//  ---------------------------------------------

// @DO - Note that there's 20px of padding on each side, so the effective max-width is 1240px
@layout__max-width: 1280px;

// @DO - Required to be set to false in order for Slick slider to work on viewports below 768px
@use-flex: false;


// Overrides for the following:
// vendor/magento/magento2-base/lib/web/css/source/lib/variables/_loaders.less

//
//  Loaders
//  ---------------------------------------------


// Overrides for the following:
// vendor/magento/magento2-base/lib/web/css/source/lib/variables/_messages.less

//
//  Flash Messages
//  ---------------------------------------------


// Overrides for the following:
// vendor/magento/magento2-base/lib/web/css/source/lib/variables/_navigation.less

//
//  Navigation
//  ---------------------------------------------

@navigation__background: #fff;
@navigation-level0-item__font-size: 17;
@navigation-level0-item__color: @djo-gray;

@navigation-desktop__background: @navigation__background;


// Overrides for the following:
// vendor/magento/magento2-base/lib/web/css/source/lib/variables/_pages.less

//
//  Pages
//  ---------------------------------------------

@pager__font-size: 2rem;
@pager__font-weight: 700;
@pager__line-height: 1;

@pager-item__margin: 0 12px;
@pager-item__padding: 6px 12px;

// Pager current page
@pager-current__font-weight: 700;
@pager-current__color: @djo-blue;
@pager-current__background: transparent;

// Pager link default
@pager__color: @djo-gray;

// Pager link visited
@pager__visited__color: @pager__color;

// Pager link hover
@pager__hover__color: @djo-blue;

// Pager link active
@pager__active__color: @link__hover__color;

// Pager link.action
@pager-icon__position: after;

// Pager link.action default
@pager-action__color: #bbb;
@pager-action__border: false;
@pager-action__background: false;


// Overrides for the following:
// vendor/magento/magento2-base/lib/web/css/source/lib/variables/_popups.less

//
//  Popups
//  ---------------------------------------------


// Overrides for the following:
// vendor/magento/magento2-base/lib/web/css/source/lib/variables/_rating.less

//
//  Rating
//  ---------------------------------------------


// Overrides for the following:
// vendor/magento/magento2-base/lib/web/css/source/lib/variables/_sections.less

//
//  Sections
//  ---------------------------------------------


// Overrides for the following:
// vendor/magento/magento2-base/lib/web/css/source/lib/variables/_tables.less


//
//  Tables
//  ---------------------------------------------


// Overrides for the following:
// vendor/magento/magento2-base/lib/web/css/source/lib/variables/_tooltips.less

//
//  Tooltips
//  ---------------------------------------------


// Overrides for the following:
// vendor/magento/magento2-base/lib/web/css/source/lib/variables/_typography.less

//
//  Typography
//  ---------------------------------------------

// Font family
@font-family__base: 'Lato', sans-serif;

// @DO - Custom font family variables
@do-secondary-font-family: 'Lato', sans-serif;
@do-tertiary-font-family: 'Lato', sans-serif;

// //  Font size = 14px
// @font-size-ratio__base: 1.4; // Defines ratio of the root font-size to the base font-size

// Font size = 16px
@font-size-ratio__base: 1.6; // Defines ratio of the root font-size to the base font-size

// Change @font-size-ratio__base in order to change @font-size__base
// When using a variable in CSS to give a selector the base font-size, use the @font-size__base variable:
@font-size__base: unit(@font-size-unit-ratio * @font-size-ratio__base, px); // Base font size value in <b>px</b>

@font-weight__regular: 400;

// Text color
@text__color: @djo-gray;

// Line height
@line-height__base: 1.428571429;

// Links
@link__color: @djo-blue;
@link__text-decoration: none;

@link__visited__color: @link__color;
@link__visited__text-decoration: none;

@link__hover__color: @link__color;
@link__hover__text-decoration: underline;

@link__active__color: @link__color;
@link__active__text-decoration: underline;


// Headings
@heading__font-family__base: @font-family__base;
@heading__font-weight__base: 700;
@heading__color__base: @text__color;

// @DO - custom
@heading__text-transform__base: none;

@h1__font-size: 3.6rem;
@h1__font-size-desktop: 3.6rem;
@h1__font-weight: @heading__font-weight__base;

@h2__font-size: 3rem;
@h2__font-size-desktop: 3rem;
@h2__font-weight: @heading__font-weight__base;

@h3__font-size: 2.4rem;
@h3__font-size-desktop: 2.4rem;
// @DO - Make lesser headings have the same font weight as H1 and H2 elements
@h3__font-weight: @heading__font-weight__base;

@h4__font-size: 2rem;
@h4__font-size-desktop: 2rem;
// @DO - Make lesser headings have the same font weight as H1 and H2 elements
@h4__font-weight: @heading__font-weight__base;

@h5__font-size: 1.8rem;
@h5__font-size-desktop: 1.8rem;
// @DO - Make lesser headings have the same font weight as H1 and H2 elements
@h5__font-weight: @heading__font-weight__base;

@h6__font-size: 1.6rem;
@h6__font-size-desktop: 1.6rem;
// @DO - Make lesser headings have the same font weight as H1 and H2 elements
@h6__font-weight: @heading__font-weight__base;

// Misc
@hr__border-color: @djo-gray-light;


// Overrides for the following:
// vendor/magento/theme-frontend-luma/Magento_Theme/web/css/source/module/_collapsible_navigation.less

//
//  Collapsible Navigation
//  ---------------------------------------------

@collapsible-nav-current-border-color: @djo-blue-light;


// Overrides for the following:
// vendor/magento/theme-frontend-luma/Magento_Checkout/web/css/source/module/checkout/_checkout.less

//
//  Checkout
//  ---------------------------------------------

@checkout-step-title__color__mobile: @heading__color__base;
@checkout-step-title__color__desktop: @heading__color__base;
@checkout-step-title__font-family__mobile: @heading__font-family__base;
@checkout-step-title__font-family__desktop: @font-family__base;
@checkout-step-title__font-size__mobile: 26;
@checkout-step-title__font-size__desktop: 26;
@checkout-step-title__font-weight: @font-weight__regular;
@checkout-step-title__font-weight__mobile: @heading__font-weight__base;
@checkout-step-title__font-weight__desktop: @font-weight__regular;
@checkout-step-title__text-transform__mobile: @heading__text-transform__base;
@checkout-step-title__text-transform__desktop: none;


// Overrides for the following:
// vendor/magento/theme-frontend-luma/Magento_Checkout/web/css/source/module/checkout/_progress-bar.less

//
//  Checkout Progress
//  ---------------------------------------------

@checkout-progress-bar-item__background-color: @djo-gray-light;
@checkout-progress-bar-item__color: @djo-gray-light;
@checkout-progress-bar-item__active__background-color: @djo-blue;
@checkout-progress-bar-item__active__color: @djo-gray;
@checkout-progress-bar-item__complete__color: @checkout-progress-bar-item__color;
@checkout-progress-bar__font-weight: @font-weight__regular;
@checkout-progress-bar-item-element-inner__border-color: @djo-gray-light;
@checkout-progress-bar-item-element-inner__active__border-color: @djo-blue;


// Overrides for the following:
// vendor/magento/theme-frontend-luma/Magento_Checkout/web/css/source/module/checkout/_shipping.less

//
//  Checkout Shipping Address
//  ---------------------------------------------

@checkout-shipping-item__active__border-color: @djo-blue;


// @DO - Custom Variables

//
//  Category Page
//  ---------------------------------------------

@product-listing-price__font-size: 22.5;

//
//  PDP
//  ---------------------------------------------

@pdp-separator__color: #b4b4b4;
@pdp-reviews-actions__font-size: 16;
@pdp-price__font-size: 29;
@pdp-price__font-weight: 700;
@pdp-special-price__color: @djo-blue;
@pdp-special-price__font-size: 29;
@pdp-special-price__font-weight: 700;
@pdp-old-price__color: #c2c0bf;
@pdp-old-price__font-size: 22;
@pdp-add-to-cart-button__background-color: @djo-blue;
@pdp-add-to-cart-button__hover__background-color: @djo-blue-dark;
@pdp-add-to-cart-button__border-color: @djo-blue;
@pdp-add-to-cart-button__hover__border-color: @djo-blue-dark;
@pdp-add-to-cart-button__font-size: 18;
@pdp-add-to-cart-button__font-weight: 700;


//
//  Checkout
//  ---------------------------------------------

@checkout-order-summary-accordion__font-size: 18;
@checkout-order-summary-accordion__font-weight: @font-weight__regular;
@checkout-order-summary-accordion__letter-spacing: normal;