// Variables
//
// Copy settings from this file into the provided `_custom.scss` to override
// the Bootstrap defaults without modifying key, versioned files.
//
// Variables should follow the `$component-state-property-size` formula for
// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
//
// Temporary, used for calculation variables should by named `$_variable-name`
//
// Table of Contents
//
// Color system
// Body
// Page
// Components
// Fonts
// Links
// Z-index master list
// Grid breakpoints
// Grid containers
// Grid columns
// Buttons
// Form
// Pagination 
// Tooltips

//
// Color system
//

// Gray colors
$white: #ffffff;
$gray-100: #edeff4;
$gray-200: #d7d7d7;
$gray-300: #cccccc;
$gray-400: #b7b7b7;
$gray-500: #9b9b9b;
$gray-600: #868e96;
$gray-700: #2c343b;
$gray-800: #151515;
$gray-900: #111111;
$black: #000000;
$gray-light: #E5E5E5;
$gray-lighten: #F6F6F6;

//
// Body 
//
$body-bg: $white;
$body-color: rgba($black , .7);

$theme-colors: ();

// Accent colors
$primary: #FF4141;
$primary-dark: #FF2728;
$danger-color: #f5543f;
$success-color: #98bf44;

// Additional colors
$facebook: #4d70a8;
$facebook-light: #748abc;
$facebook-darken: darken($facebook, 5%);

$twitter: #02bcf3;
$twitter-light: #81cbdb;
$twitter-darken: darken($twitter, 5%);

$google: #e2411e;
$google-light: #de7272;
$google-darken: darken($google, 5%);

//
// Page
//
$page-boxed-width: 1600px;
$page-boxed-background-color: $gray-100;
$page-boxed-background-image: url(../images/bg-pattern-boxed.png);

//
// Components
//
// Define common padding and border radius sizes and more.
$border-width: 1px;

$border-radius: 4px;
$border-radius-lg: .3rem;
$border-radius-sm: .2rem;

$transition-base: all .3s ease-in-out;

// Map
//
$map-height: 200px;
$map-xs-height: 250px;
$map-md-height: 450px;

// Custom
$shadow-area-1: -3px 0px 50px -2px rgba(0, 0, 0, 0.09);
$shadow-area-2: 1px 1px 10px 0 rgba(0, 0, 0, 0.2);

//
// Fonts
//
// Font, line-height, and color for body text, headings, and more.
$font-family-sans-serif: 'Roboto Condensed', sans-serif;
$font-family-sans-serif-1: 'Roboto', sans-serif;
$font-family-serif: "Roboto Slab", "Times New Roman", Times, serif;
$font-family-monospace: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

$font-family-base: $font-family-sans-serif;
$font-family-sec: $font-family-sans-serif-1;

$font-weight-bold: 700;

// Base fonts 
$font-size-body: 18px;
$font-size-lg: 80px;
$font-size-sm: 12px;

$_lh-base: 28px;
$_lh-lg: 28px;
$_lh-sm: 18px;

$font-weight-base: 400;

// ** < Calculated font values >
$line-height-base: ($_lh-base / $font-size-body);
$line-height-lg: ($_lh-lg / $font-size-lg);
$line-height-sm: ($_lh-sm / $font-size-sm);
// ** </ Calculated font values >

// Headings
$headings-font-family: $font-family-sans-serif;
$headings-font-weight: 700;
$headings-line-height: 1.1;
$headings-color: $gray-800;

// Template Heading Values
$_h1-fsz: 60;
$_h2-fsz: 43;
$_h3-fsz: 36;
$_h4-fsz: 24;
$_h5-fsz: 18;
$_h6-fsz: 16;

$_h1-lh: 72;
$_h2-lh: 55;
$_h3-lh: 48;
$_h4-lh: 30;
$_h5-lh: 26;
$_h6-lh: 24;

// ** < Calculated Headings values >
$h1-font-size: $_h1-fsz * 1px;
$h2-font-size: $_h2-fsz * 1px;
$h3-font-size: $_h3-fsz * 1px;
$h4-font-size: $_h4-fsz * 1px;
$h5-font-size: $_h5-fsz * 1px;
$h6-font-size: $_h6-fsz * 1px;

$h1-line-height: ($_h1-lh / $_h1-fsz);
$h2-line-height: ($_h2-lh / $_h2-fsz);
$h3-line-height: ($_h3-lh / $_h3-fsz);
$h4-line-height: ($_h4-lh / $_h4-fsz);
$h5-line-height: ($_h5-lh / $_h5-fsz);
$h6-line-height: ($_h6-lh / $_h6-fsz);
// ** </ Calculated Headings values >

// Icon Fonts
$fa: 'FontAwesome';
$mdi: 'Material Design Icons';
$mi: 'Material Icons';

// Lead
$lead-font-size: 24px;
$lead-line-height: 34px;
$lead-font-weight: 300;

// Hr
$hr-border-color: $gray-200;
$hr-border-width: $border-width;

// Mark
$mark-padding: 5px 10px;
$mark-bg: $primary;

$dt-font-weight: inherit;
$list-inline-padding: 5px;

// Code
$code-font-size: 90%;
$code-padding-y: 3px;
$code-padding-x: 5px;
$code-color: $gray-900;
$code-bg: $gray-100;

//
// Links
//
$link-color: $primary;
$link-decoration: none;
$link-hover-color: darken($link-color, 15%);
$link-press-color: darken($link-color, 15%);
$link-hover-decoration: underline;

// Z-index master list
//
// Warning: Avoid customizing these values. They're used for a bird's eye view
// of components dependent on the z-axis and are designed to all work together.

$zindex-dropdown: 1000;
$zindex-sticky: 1020;
$zindex-fixed: 1030;
$zindex-modal-backdrop: 1040;
$zindex-modal: 1090;
$zindex-popover: 1060;
$zindex-tooltip: 1070;
// Custom
$zindex-rd-navbar: 1080;
$zindex-lg: 1090;
$zindex-layout-panel: 1100;

//
// Grid breakpoints
//
// Define the minimum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.
$grid-breakpoints: (
	xs: 0,
	sm: 576px,
	md: 768px,
	lg: 992px,
	xl: 1200px,
	xxl: 1600px
);

@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
@include _assert-starts-at-zero($grid-breakpoints);

$screen-fullhd: 1600px;

// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.

$container-max-widths: (
	sm: 540px,
	md: 720px,
	lg: 960px,
	xl: 1200px
);
@include _assert-ascending($container-max-widths, "$container-max-widths");

//
// Grid columns
//
// Set the number of columns and specify the width of the gutters.
$grid-columns: 12;
$grid-gutter-width: 30px;
$grid-gutter-width-narrow: 30px;

//
// Buttons
//

$input-btn-padding-y: 11px;
$input-btn-padding-x: 35px;
$input-btn-font-size: 14px;
$input-btn-line-height: 1.25;

$input-btn-padding-y-sm: 5px;
$input-btn-padding-x-sm: 25px;
$input-btn-line-height-sm: 1.5;

$input-btn-padding-y-md: 14px;
$input-btn-padding-x-md: 51px;

$input-btn-padding-y-lg: 12px;
$input-btn-padding-x-lg: 50px;
$input-btn-line-height-lg: 1.5;

$btn-font-family: $font-family-base;
$btn-font-weight: 400;
$btn-letter-spacing: .1em;
$btn-text-transform: uppercase;

$btn-box-shadow: 0;
$btn-focus-box-shadow: 0;
$btn-active-box-shadow: 0;

$btn-link-disabled-color: $gray-600;

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

// Allows for customizing button radius independently from global border radius
$btn-border-radius: $border-radius;
$btn-border-radius-lg: $border-radius-lg;
$btn-border-radius-sm: $border-radius-sm;

$btn-transition: all .15s ease-in-out;

//
// Forms
//
$form-input-height: 50px;
$form-input-lg-height: 60px;
$form-input-sm-height: 40px;

$form-input-color: $gray-400;
$form-input-color-placeholder: $form-input-color;

$form-input-background: $white;
$form-input-border-color: #C4C4C4;
$form-input-border-radius: $border-radius;

$form-input-font-size: 15px;
$form-input-line-height: 24px;
$form-input-font-weight: 400;

$form-input-border: 1px solid $form-input-border-color;
$form-input-padding-horizontal: 19px;
$form-input-line-height: round($form-input-font-size * 1.7);

$form-input-padding-vertical: round(($form-input-height - $form-input-line-height) / 2) + 1px;
$form-input-padding: $form-input-padding-vertical $form-input-padding-horizontal;

@if ($form-input-border != none) {
	$form-input-padding-vertical: round(($form-input-height - $form-input-line-height - (nth($form-input-border, 1) * 2)) / 2);
	$form-input-padding: $form-input-padding-vertical $form-input-padding-horizontal;
}

$form-textarea-default-height: 135px;
$form-textarea-default-min-height: $form-input-height;
$form-textarea-default-max-height: round($form-textarea-default-height * 1.7);

$form-feedback-focus-color: $primary;
$form-feedback-valid-color: $success-color;
$form-feedback-invalid-color: $danger-color;

//
// Pagination
//
$pagination-padding-y: 10px;
$pagination-padding-x: 10px;
$pagination-font-size: 14px;
$pagination-line-height: 24px;

$pagination-color: $gray-500;
$pagination-bg: $white;
$pagination-border-width: 2px;
$pagination-border-color: $gray-200;

$pagination-hover-color: $white;
$pagination-hover-bg: $primary;
$pagination-hover-border-color: $primary;

$pagination-active-color: $white;
$pagination-active-bg: $primary;
$pagination-active-border-color: $primary;

$pagination-disabled-color: $gray-400;
$pagination-disabled-bg: $gray-200;
$pagination-disabled-border-color: $gray-200;

//
// Tooltips
//
$tooltip-max-width: 200px;
$tooltip-color: $white;
$tooltip-bg: $primary;
$tooltip-opacity: 1;
$tooltip-padding-y: 6px;
$tooltip-padding-x: 10px;
$tooltip-margin: 0;

$tooltip-arrow-width: 6px;
$tooltip-arrow-height: 6px;
$tooltip-arrow-color: $tooltip-bg;


