// RedmineX Theme
// Copyright 2020 RedmineX
// For license, see https://www.redmine-x.com
// Created by Michael Staněk
// Created without vendor prefixes, "AutoPrefixed" by PrePros v5 (https://prepros.io)
 
/* ==========================================================================
   Variables
   ========================================================================== */
   
// Variable override: Grays
$gray-100:				#fefefe; // $gray-lighter-xl
$gray-200: 				#eeeeee; // $gray-lighter
$gray-300: 				#cccccc; // no former variable
$gray-400: 				#aaaaaa; // no former variable
$gray-500: 				#999999; // no former variable
$gray-600: 				#777777; // $gray-light
$gray-700: 				#555555; // $gray
$gray-800: 				#333333; // $gray-dark
$gray-900: 				#222222; // $gray-darker
$white:    				#fff;
$black: 	   				#000;

// Variable override: Primary & Secondary
$primary:   			#4ca0ff; // Blue 
$primary-light: 			lighten($primary, 10%); // Light blue 
$primary-dark: 			#1d2630; // Dark blue - navy
$secondary:				#ff5795; // Pink
$tetriary:				#e0e5ec; // Light blue-gray

// Brand colors
$brand-primary: 		$primary;
$brand-success: 		#00BBB2;
$brand-info:			$primary; 
$brand-warning:     	#F27D3E;
$brand-danger:      	#fc5c65;
$brand-immediate: 		#eb3b5a;
$brand-yellow: 			#FFEDCB;

// Priority colors
$priority-6: 			#98F68D;
$priority-7: 			#8B77CB;
$priority-8: 			#663F00;
$priority-9: 			#F77297;
$priority-10: 			#002D78;
$priority-11: 			#C49638;
$priority-12: 			#F37C3D;
$priority-13: 			#DAA21C;

// Messages
$message-success: 		$brand-success;
$message-danger: 		$brand-danger;
$message-warning: 		$brand-warning;

// Alert (brand) borders + backgrounds
$brand-info-bg: 		lighten($brand-info, 53%);
$brand-info-border: 	lighten($brand-info, 28%);
$brand-success-bg: 		lighten($brand-success, 47%);
$brand-success-border: 	lighten($brand-success, 20%);
$brand-warning-bg: 		lighten($brand-warning, 38%);
$brand-warning-border: 	lighten($brand-warning, 10%);
$brand-danger-bg: 		lighten($brand-danger, 45%);
$brand-danger-border: 	lighten($brand-danger, 20%);

// Variable override: Alerts
$success:       		$brand-success;
$info:          		$brand-info;
$warning:       		$brand-warning;
$danger:        		$brand-danger;

// Variable override: Colors
$blue:    				$primary;
$red:     				$brand-warning;
$orange:  				$primary;
$green:   				$brand-success;

// Variable override: Body - Settings for the `<body>` element. 
$body-bg: 				#f7f8fa; //formerly #f4f5f7
$body-bg-dark:          #181c1f; // derivate of $primary
$body-bg-contrast-light:	#fbfcfd;
$body-color:            #434d59; // derivate of $primary
$body-color-dark:		#4b5663;
$input-bg: 				$white;
$input-bg-dark: 		#252b31; // derivate of $primary

// Variable override: Links
$link-color:            darken($primary, 10%);
$link-color-muted:      #6691c1;
$link-decoration:       none;
$link-hover-decoration: underline;
// $button-text-color: 		#6d93c1; // muted gray blue
$button-text-color: 		$link-color;

// Variable override: Grid breakpoints
$grid-breakpoints: (
  non: 0,
  xxs: 380px,
  xs: 480px,
  sm: 576px,
  md: 768px,
  redmine-mobile: 900px,
  lg: 992px,
  xl: 1200px,
  hd: 1500px,
  2k: 1900px
);

// Variable override: Grid containers
$container-max-widths: (
  non: 0,
  xxs: 380px, 
  xs: 480px,
  sm: 576px,
  md: 768px,
  redmine-mobile: 900px,
  lg: 992px,
  xl: 1200px,
  hd: 1500px,
  2k: 1900px
);

// Variable override: Fonts & text colors
$font-family-sans-serif:		'Roboto', Arial, sans-serif;
$font-family-base:          $font-family-sans-serif;
$font-family-headings: 		'Roboto', Arial, sans-serif;
$font-size-base:            1rem;
$font-size-xxs: 			($font-size-base * 0.6); // 9px
$font-size-xs: 				($font-size-base * 0.75); // 12px
$font-size-sm1: 			($font-size-base * 0.8125); // 13px
$font-size-sm2: 			($font-size-base * 0.875); // 14px
$font-size-lg:              ($font-size-base * 0.9375); // 15px
$font-size-xl:              ($font-size-base * 1.25); // 20px
$input-height-base:			2.25rem; 
$input-height-sm:			2rem;
$input-height-lg:			2.375rem;
$input-height-xl:			2.5rem;
$input-padding:				0.25rem 0.5rem;
$input-height:              $input-height-base;
$text-color:					$body-color;
$text-color-dark:			$body-color-dark;
$text-color-light:			#787c81;
$text-color-disabled:		#a0a0a0;
$headings-color:            darken($body-color, 25%);
$headings-color-dark:       #ced7e3;
$input-color:				$text-color;

// Variable override: Z-index master list
$zindex-dropdown:			1000;
$zindex-sticky:             1020;
$zindex-fixed:              1030;
$zindex-modal-backdrop:     1040;
$zindex-modal:              1050;
$zindex-popover:            1060;
$zindex-tooltip:            1070;

// Variable override: Line height
$line-height-base:		1.5;
$line-height-lg:    		1.75;
$line-height-xl:    		2;
$line-height-sm:    		1.25;

// Assorted custom variables
$line-height-list:				$line-height-lg;
$border-radius: 				4px;
$dt-bg-topmenu:					$input-bg-dark;
$query-form-bg:					darken($body-bg, 4%);
$query-form-bg-dark:			#f5f7fa;
$query-form-border:				darken($query-form-bg, 10%);
$bg-topmenu:					$white;
$bg-topmenu-dark:				$primary-dark;
$text-bg-dark:					lighten($bg-topmenu, 75%);
$dropdown-bg-dark:				lighten($body-bg-dark, 5%);
$table-bg:						$white;
$table-bg-dark:					$input-bg-dark;
$table-bg-hover:					#f9fcff;
$table-bg-dark-hover:			lighten($table-bg-dark, 4%);
$btn-width-lg:					220px;
$fa-font-size-base: 			14px;
$fa-font-color:					lighten($text-color, 15%);
$fa-font-color-dark:				darken($body-color-dark, 10%);
$input-max-width-lg: 			334px;
$input-max-width-sm: 			265px;
$input-max-width-xs: 			210px;
$flyout-menu-width: 				250px;
$heading-margin-bottom: 		0.75em;
$attributes-bg:					#f3f8fc;
$pre-bg: 						#fafafa;

// Variable override: Borders
$border-color-light:					darken($query-form-bg, 5%);
$border-color-dark:	 				lighten($query-form-bg-dark, 3%);
$table-border-color:    				$border-color-light;

$select-background:			$input-bg url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%2378797a' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 11px center/8px 11px;
$select-background-query:	darken($body-bg, 2%) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%2378797a' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0 center/32px 10px;
$select-background-white: 	$white	 url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%2378797a' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 11px center/8px 11px;
