// Bootstrap overrides

$font-family-sans-serif: 'Source Sans Pro', Arial, sans-serif;
$font-family-serif: 'PT Serif', serif;

$font-size-base: 1rem;
$font-size-lg: 1rem;
$font-size-sm: 1rem;

$font-size-title-main: 5.2rem;
$font-size-title-l2: 4.133rem;
$font-size-title-l3: 3.2rem;
$font-size-title-l4:  1.867rem;
$font-size-item-highlight: 1.6rem;
$font-size-story: 1.333rem;
$font-size-body: 1.2rem;
$font-size-navigation: 0.8667rem;
$font-size-header: 0.8667rem;

$font-size-h1: $font-size-title-main;
$font-size-h2: $font-size-title-l2;
$font-size-h3: $font-size-title-l3;
$font-size-h4: $font-size-title-l4;
$font-size-h5: $font-size-item-highlight;
$font-size-h6: $font-size-story;

$line-height-base: 1.6;
$line-height-computed: $line-height-base;

$padding-base-vertical: 0.4667rem;
$padding-base-horizontal: 2rem;

$padding-large-vertical: 0.8rem;
$padding-large-horizontal: 2rem;

$padding-small-vertical: 0.06667rem;
$padding-small-horizontal: 1.333rem;

$padding-xs-vertical: 0;
$padding-xs-horizontal: 0.6667rem;

$line-height-lg: 1.6rem;
$line-height-sm: 1.6rem;

$line-height-large-computed: $line-height-base;
$line-height-small-computed: $line-height-base;

$border-radius: 0;
$border-radius-lg: 0;
$border-radius-sm: 0;

$jumbotron-font-size: $font-size-item-highlight;
$jumbotron-heading-font-size: $font-size-title-main;

$icon-font-path: 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/fonts/';

// Hide border on pre elements
$pre-border-color: transparent;

$text-legibility-max-width: 750px;

// Custom transition variables

$transition-default: cubic-bezier(0.4, 0.0, 0.2, 1);
$transition-easeout: cubic-bezier(0.0, 0.0, 0.2, 1);
$transition-easein: cubic-bezier(0.4, 0.0, 1, 1);
$transition-ease: cubic-bezier(0.4, 0.0, 0.6, 1);

$transition-fast: 195ms;
$transition-slow: 375ms;
$transition-normal: 225ms;

$transition-delay-fast: $transition-fast;
$transition-delay-slow: $transition-slow;
$transition-delay-normal: $transition-normal;

// Drawer (Side Menu) width

$drawer-widths: (
  xs: 300px,
  sm: 300px,
  md: 300px,
  lg: 300px
);

/// Used in our logo and as the subtle text color on dark backgrounds.
/// @title AXA Blue
/// @color Brand Colors
$color-axa-blue: #00008f;

/// Used in our logo, to attract special offers and in error states.
/// @title AXA Red
/// @color Brand Colors
$color-axa-red: #c91432;

/// @title Deep Sapphire
/// @color Main Colors
$color-deep-sapphire: #00005b;

/// @title St. Tropaz
/// @color Main Colors
$color-st-tropaz: #2425aa;

/// @title Azure
/// @color Main Colors
$color-azure: #3032c1;

/// @title Ocean Blue
/// @color Main Colors
$color-ocean-blue: #4976BA;

/// Used for links and as the most common background color.
/// @title Dark Indigo
/// @color Main Colors
$color-dark-indigo: #3b3fd8;

/// @title Indigo
/// @color Main Colors
$color-indigo: #494df4;

/// @title Flamingo
/// @color Main Colors
$color-flamingo: #ec4d33;

/// Used as the text color for call to action links.
/// @title Burnt Sienna
/// @color Main Colors
$color-burnt-sienna: #f07662;

/// Used as the default text color.
/// @title Mineshaft
/// @color Main Colors
$color-mineshaft: #333333;

/// @title Scorpion
/// @color Main Colors
$color-scorpion: #5f5f5f;

/// @title Gray
/// @color Main Colors
$color-gray: #7f7f7f;

/// @title Dusty Gray
/// @color Main Colors
$color-dusty-gray: #999999;

/// @title Silver
/// @color Main Colors
$color-silver: #cccccc;

/// @title Mercury
/// @color Main Colors
$color-mercury: #e5e5e5;

/// Used for light subtle backgrounds.
/// @title Wild Sand
/// @color Main Colors
$color-wild-sand: #f5f5f5;

/// @title Alabaster
/// @color Main Colors
$color-alabaster: #fafafa;

/// Used as the default text color on dark backgrounds.
/// @title White
/// @color Main Colors
$color-white: #ffffff;

/// @title Black
/// @color Main Colors
$color-black: #000000;

/// @title Periwinkle
/// @color Main Colors
$color-periwinkle: #c9d8ff;

/// @title Iceberg
/// @color Main Colors
$color-iceberg: #d4eef5;


/// Used as top content bar and corporate messages.
/// @title Outer Space
/// @color Secondary Colors
$color-outer-space: #343c3f;

$color-teal-blue: #064360;
$color-venice-blue: #075d86;
$color-crimson: #c91432;
$color-amaranth: #f02849;
$color-amber: #ffbf00;
$color-bright-sun: #ffd33b;
$color-mountain-meadow: #1c9a67;
$color-jungle-green: #2ab27b;
$color-fountain-blue: #57c3c3;
$color-monte-carlo: #7ed2d2;
$color-dark-orchild: #bc30c1;
$color-nero: #1a1a1a;

//----- Override bootstrap colors

$brand-primary:         $color-indigo !default;
$brand-success:         $color-jungle-green !default;
$brand-info:            $color-periwinkle !default;
$brand-warning:         $color-bright-sun !default;
$brand-danger:          $color-crimson !default;


//----- Component colors

$color-button-primary: $color-axa-blue;

$color-button-secondary: $color-deep-sapphire;

$badge-bg: $color-indigo;

$jumbotron-bg: $color-azure;
$jumbotron-color: $color-white;
$jumbotron-heading-color: $color-white;

$navbar-default-bg: $color-wild-sand;
$navbar-default-border: $color-wild-sand;
$navbar-default-color: $color-mineshaft;
$navbar-default-link-color: $color-scorpion;
$navbar-default-link-hover-color: $color-mineshaft;
$navbar-default-link-active-bg: $color-silver;
$navbar-default-link-disabled-color: $color-dusty-gray;

$navbar-inverse-bg: $color-mineshaft;
$navbar-inverse-border: $color-mineshaft;
$navbar-inverse-color: $color-wild-sand;
$navbar-inverse-link-color: $color-silver;
$navbar-inverse-link-hover-color: $color-wild-sand;
$navbar-inverse-link-active-bg: $color-black;
$navbar-default-link-disabled-color: $color-dusty-gray;

$well-bg: $color-wild-sand;
$well-border: $color-silver;

//** Background color used for `.table-striped`.
$table-bg-accent:               $color-alabaster;
//** Background color used for `.table-hover`.
$table-bg-hover:                $color-wild-sand;
//** Border color for table and cell borders.
$table-border-color:            $color-silver;


//== Motion
//
//## Specify the basic motion constants
$motion-default: cubic-bezier(0.4, 0.0, 0.2, 1);
$motion-easeout: cubic-bezier(0.0, 0.0, 0.2, 1);
$motion-easein: cubic-bezier(0.4, 0.0, 1, 1);
$motion-ease: cubic-bezier(0.4, 0.0, 0.6, 1);

$duration-fast: 195ms;
$duration-slow: 375ms;
$duration-normal: 225ms;


// Custom variables

// #############################
// # Colors
// #############################

// Primary colors

$color-blue: #103184;
$color-red: #ff1821;

// Secondary colors

$color-light-blue--light: #5c91c0;
$color-light-blue: #0062a9;
$color-green: #7a9f35;
$color-blue-gray--light: #dedee2;
$color-blue-gray: #79838d;

$color-white: #ffffff;
$color-gray--lighter: #efefef;
$color-gray--light: #e5e5e5;
$color-gray--mid: #dadada;
$color-gray: #b0b0b0;
$color-gray--dark: #919191;
$color-gray--darker: #6f6f6f;
$color-gray--predarkest: #666666;
$color-gray--darkest: #333333;
$color-black: #000000;

// TBD colors

$color-tbd-4: #a5afcb;
$color-tbd-5: #eff4f9;
$color-tbd-6: #dde8f2;
$color-tbd-7: #12369d;
$color-tbd-8: #e0e0e0;
$color-tbd-9: #22336a;
$color-tbd-10: #040b20;
$color-tbd-11: #131f44;
$color-tbd-12: #f3f6fc;
$color-tbd-13: #4f5d88;
$color-tbd-16: #f2f2f2;
$color-tbd-17: #dfdfdf;
$color-tbd-23: #1762a5;
$color-tbd-24: #010943;
$color-tbd-25: #babfd3;
$color-light-grey: #999 !default;

// #############################
// # Buttons
// #############################

$font-size: 14px;
$font-weight-medium: 600;
$line-height: 1.375;
$font-color: $color-gray--darkest;


// #############################
// # Focus
// #############################

$focus-border-width: 1px;

// #############################
// # Controls
// #############################

$input-color: $color-mineshaft;
$input-border-color: $color-silver;
$input-padding-y: 0.625rem; // gets us approx. to the wanted 50px height
$input-padding-x: 20px;
$custom-select-padding-y: 10px;
$custom-select-padding-x: 20px;
$custom-select-indicator-padding: 20px + 10px; // 20px + indicator width (TODO: estimated)

$axa-input-width: 300px !default ;
$axa-input-short-width: 200px !default ;
$axa-input-long-width: 400px !default ;

// override so that there is no calc error
$input-height-lg: ($line-height-large-computed + ($padding-large-vertical * 2) + 2);
$input-height-sm: ($line-height-small-computed + ($padding-small-vertical * 2) + 2);

// #############################
// # Buttons
// #############################

$button-height: 50px;
$button-height--medium: 50px;
$button-pad-lr: 30px;
$button-pad-lr--medium: 40px;
$button-icon-size: 16px;
$button-font-size: 16px;
$button-font-size--medium: 18px;
$button-border-width: 2px;

$button-sm-height: 30px;
$button-sm-height--medium: 30px;
$button-sm-pad-lr: 15px;
$button-sm-icon-size: 14px;
$button-sm-font-size: 14px;

$button-primary-bg: $color-axa-blue;
$button-primary-color: white;
$button-primary-highlight-bg: $color-deep-sapphire;

$button-secondary-bg: $color-gray--dark;
$button-secondary-color: white;
$button-secondary-highlight-bg: lighten($color-gray--dark, 5%);

$button-more-height: 48px;

$button-ghost-height: 48px;
$button-ghost-font-size: 14px;
$button-ghost-font-size--medium: 16px;

// #############################
// # z-index
// #############################

// New z-index
$z-index-drawer-top: 10;
$z-index-header: 15;
$z-index-fixed-header: 16;
$z-index-mask: 17;
$z-index-drawer-side: 20;
$z-index-browser-not-supported-overlay: 999;

// Old z-index
$z-index-progress-step: 15;
$z-index-meta-language: 20;
$z-index-progress-step-bullet: 16;
$z-index-dropdown: 30;
$z-index-dropdown-select: 31;
$z-index-datepicker: 32;
$z-index-autocomplete: 33;
$z-index-button__badge: 9800;
$z-index-popover: 9900;
$z-index-notifications: 9950;
$z-index-site-mobile-nav: 9961;
$z-index-site-page-masked: 9960;
$z-index-example-header: 9970;
$z-index-backdrop: 9980;
$z-index-burger-icon: 9981;
$z-index-backdrop-content: 9982;
$z-index-modal-wrapper: 9998;
$z-index-modal: 9999;