/**
Theme colors
**/
:root {
    // TODO: Is this necessary?
    --none:                       0;

    --white-color:                var(--white);
    --white-bg:                   var(--white);

    // TODO: These need names that do not just describe the color
    --smoke-bg:                   var(--grey-100);
    --pale-bg:                    var(--grey-200);
    --medium-pale-bg:             var(--grey-300);

    --table-line-color:           var(--grey-300);
    // TODO: Muted color for what? This is only used in one place..
    --muted-color:                var(--grey-500);

    --popover-color:              var(--grey-100);

    --black-color:                var(--black);
    // TODO: This is too color specific and used in just one place
    --black-hr:                   var(--grey-700);

    --brown-background-color:     var(--font-color);

    // TODO: The usage of these should prob be replaced with semantic variables
    --very-light-gray:            var(--grey-100);
    --light-gray:                 var(--grey-300);
    --medium-gray:                var(--grey-500);
    --dark-gray:                  var(--grey-800);

    // TODO: These are not very semantic
    --gray-input-outline:         var(--grey-300);

    --danger-input-bg:            var(--red-100);
    --success-input-bg:           var(--green-100);

    // TODO: What is the purpose of this?
    --transparent-bg:             transparent;



    --link-primary-color: var(--primary-color);
    --link-secondary-color: var(--grey-700);
    --link-disabled-color:        var(--grey-500);
}

// General Colors

$color-azure:                $cyan-500;
$color-purple:               $purple-500;
$color-red:                  $red-500;
$color-green:                $green-500;
$color-orange:               $orange-300;
$color-blue:                 $blue-500;
$color-black:                $grey-800;

:root {
    --color-azure:                var(--cyan-500);
    --color-purple:               var(--purple-500);
    --color-red:                  var(--red-500);
    --color-green:                var(--green-500);
    --color-orange:               var(--orange-300);
    --color-blue:                 var(--blue-500);
    --color-black:                var(--grey-800);
}


/*      light colors - used for select dropdown         */
// TODO: Maybe these should just be lightened in the calendar file if they are only used there
$light-blue:                 rgba(var(--primary-color), .2);
$light-azure:                rgba(var(--info-color), .2);
$light-green:                rgba(var(--success-color), .2);
$light-orange:               rgba(var(--warning-color), .2);
$light-red:                  rgba(var(--danger-color), .2);

$placeholder-gray:           var(--grey-400) !default;



/*           Social buttons            */

$social-facebook: 			#3b5998;
$social-twitter: 			#55acee;
$social-pinterest: 			#cc2127;
$social-google: 			#dd4b39;
$social-linkedin: 			#0976b4;
$social-dribbble: 			#ea4c89;
$social-github: 			#333333;
$social-youtube: 			#e52d27;
$social-instagram: 		    #125688;
$social-reddit: 			#ff4500;
$social-tumblr: 			#35465c;
$social-stumbleupon: 		#eb4924;
$social-behance: 			#1769ff;


//== Components
//

$padding-default-vertical:     10px !default;
$padding-default-horizontal:   20px !default;

$padding-base-vertical:         6px !default;
$padding-base-horizontal:       12px !default;

$padding-round-vertical:        9px !default;
$padding-round-horizontal:     18px !default;

$padding-simple-vertical:      10px !default;
$padding-simple-horizontal:    18px !default;

$padding-large-vertical:       11px !default;
$padding-large-horizontal:     30px !default;

$padding-small-vertical:        4px !default;
$padding-small-horizontal:     10px !default;

$padding-xs-vertical:           2px !default;
$padding-xs-horizontal:         5px !default;

$padding-label-vertical:        2px !default;
$padding-label-horizontal:     12px !default;

$margin-base:                  15px !default;

// padding for links inside dropdown menu
$padding-dropdown-vertical:     10px !default;
$padding-dropdown-horizontal:   15px !default;

$margin-large-vertical:        30px !default;
$margin-base-vertical:         15px !default;


// Cristina: am schimbat aici si s-au modificat inputurile
$margin-bottom:                0 0 10px 0 !default;
$border-radius-small:           3px !default;
$border-radius-base:            4px !default;
$border-radius-large:           6px !default;
$border-radius-extreme:        6px !default;

$border-radius-large-top:      $border-radius-large $border-radius-large 0 0 !default;
$border-radius-large-bottom:   0 0 $border-radius-large $border-radius-large !default;

$btn-round-radius:             30px !default;

$height-base:                  40px !default;

$font-size-base:               14px !default;
$font-size-xs:                 12px !default;
$font-size-small:              12px !default;
$font-size-medium:             16px !default;
$font-size-large:              18px !default;
$font-size-large-navbar:       20px !default;

$font-size-h1:                 3.2em   !default;
$font-size-h2:                 2.6em     !default;
$font-size-h3:                 1.825em !default;
$font-size-h4:                 1.5em   !default;
$font-size-h5:                 1.25em  !default;
$font-size-h6:                 0.9em   !default;
$font-paragraph:               14px    !default;
$font-size-navbar:             16px    !default;
$font-size-small:              12px    !default;

$font-weight-light:          300 !default;
$font-weight-normal:         400 !default;
$font-weight-semi:           500 !default;
$font-weight-bold:           700 !default;

$line-height-small:            20px !default;
$line-height-general:          1.4em !default;
$line-height:                 36px !default;
$line-height-lg:              54px !default;

$border-thin:                1.5px !default;
$border-thick:               2px !default;

$border-radius-top:        10px 10px 0 0 !default;
$border-radius-bottom:     0 0 10px 10px !default;

$dropdown-shadow:          0 2px rgba(17, 16, 15, 0.1), 0 2px 10px rgba(17, 16, 15, 0.2);

$general-transition-time:  300ms !default;

$slow-transition-time:           300ms !default;
$dropdown-coordinates:      29px -50px !default;

$fast-transition-time:           150ms !default;
$select-coordinates:         50% -40px !default;

$transition-linear:                                   linear !default;
$transition-bezier:         cubic-bezier(0.34, 1.61, 0.7, 1) !default;
$transition-ease:           ease 0s;

$navbar-padding-a:               10px 15px;
$navbar-margin-a:                16px  0px;

$padding-social-a:               10px  5px;

$navbar-margin-a-btn:            17px 3px;

$navbar-padding-brand:           15px 15px;
$navbar-margin-brand:             12px  0px;

$navbar-margin-brand-icons:      12px auto;

$navbar-margin-btn:              20px  3px;
$navbar-margin-btn-vertical:     20px;

$height-icon:					 64px !default;
$width-icon:					 64px !default;
$padding-icon:					 12px !default;
$border-radius-icon:		     15px !default;

/**
Background colors
**/
$bg-mainpanel:          $grey-200 !default;
$bg-mainheader:         $white !default;
$bg-subheader:          $grey-100 !default;

$bg-default:            $grey-700 !default;
$bg-default-inverse:    $grey-300 !default;

$bg-primary:            $grey-500 !default;
$bg-info:               $cyan-100 !default;
$bg-success:            $green-100 !default;
$bg-warning:            $orange-100 !default;
$border-warning:        $orange-300 !default;
$bg-danger:             $red-100 !default;
$border-danger:         $red-300 !default;

:root {
    --bg-mainpanel:          var(--grey-200);
    --bg-mainheader:         var(--white);
    --bg-subheader:          var(--grey-100);

    --bg-default:            var(--grey-700);
    --bg-default-inverse:    var(--grey-300);

    --bg-primary:            var(--grey-500);
    --bg-info:               var(--cyan-100);
    --bg-success:            var(--green-100);
    --bg-warning:            var(--orange-100);
    --border-warning:        var(--orange-300);
    --bg-danger:             var(--red-100);
    --border-danger:         var(--red-300);
}


// TODO: Associate these with _dropdown(only placed used)
$background-light-grey:     $grey-300 !default;
$background-lighter-grey:   $grey-200 !default;
$font-background-light-grey: $grey-500 !default;
$font-hover-background-light-grey: $grey-600 !default;

// TODO: Remove as used for old topbar
$topbar-x:             topbar-x !default;
$topbar-back:          topbar-back !default;
$bottombar-x:          bottombar-x !default;
$bottombar-back:       bottombar-back !default;

// TODO: Unify all animation timings for use with calc and global scaling factor
$transition-linear:                                   linear !default;
$transition-bezier:         cubic-bezier(0.34, 1.61, 0.7, 1) !default;
$transition-ease:           ease 0s;
$transition-ease-in:              ease-in !default;
$transition-ease-out:             ease-out !default;

$general-transition-time:  300ms !default;

$slow-transition-time:           370ms !default;
$dropdown-coordinates:      29px -50px !default;

$fast-transition-time:           150ms !default;

$ultra-fast-transition-time:     100ms  !default;

$select-coordinates:         50% -40px !default;

// TODO: Consider wiring these into new sidebar or remove
$sidebar-width:               calc(100% - 260px) !default;
$sidebar-mini-width:          calc(100% - 80px) !default;

$medium-dark-gray:           $grey-500 !default;


// border radius for buttons
$border-radius-btn-small:      26px !default;
$border-radius-btn-base:       20px !default;
$border-radius-btn-large:      50px !default;
$border-radius-none:            0px !default;
$border-radius-none-top:      $border-radius-none $border-radius-none 0 0 !default;
$border-radius-small-top:     $border-radius-small $border-radius-small 0 0 !default;

// TODO: Replace these with semantic names describing the card flavor purpose
//variables used in cards
$card-black-color:          $black !default;
$card-black-color:          $black !default;
$card-muted-color:          $grey-400 !default;

$card-background-blue:      $teal-100 !default;
$card-font-blue:            $teal-700 !default;
$card-subtitle-blue:        $teal-500 !default;

$card-background-green:      $green-100 !default;
$card-font-green:            $green-700 !default;
$card-subtitle-green:        $green-500 !default;

$card-background-yellow:      $yellow-200 !default;
$card-font-yellow:            $yellow-700 !default;
$card-subtitle-yellow:        $yellow-500 !default;

$card-background-brown:      #d6c1ab !default;
$card-font-brown:            #75442e !default;
$card-subtitle-brown:        #a47e65 !default;

$card-background-purple:      $purple-200 !default;
$card-font-purple:            $purple-700 !default;
$card-subtitle-purple:        $purple-300 !default;

$card-background-orange:      $orange-200 !default;
$card-font-orange:            $orange-700 !default;
$card-subtitle-orange:        $orange-500 !default;

:root {
    --card-black-color:          var(--black);
    --card-black-color:          var(--black);
    --card-muted-color:          var(--grey-400);

    --card-background-blue:      var(--teal-100);
    --card-font-blue:            var(--teal-700);
    --card-subtitle-blue:        var(--teal-500);

    --card-background-green:      var(--green-100);
    --card-font-green:            var(--green-700);
    --card-subtitle-green:        var(--green-500);

    --card-background-yellow:      var(--yellow-200);
    --card-font-yellow:            var(--yellow-700);
    --card-subtitle-yellow:        var(--yellow-500);

    --card-background-brown:      #d6c1ab;
    --card-font-brown:            #75442e;
    --card-subtitle-brown:        #a47e65;

    --card-background-purple:      var(--purple-200);
    --card-font-purple:            var(--purple-700);
    --card-subtitle-purple:        var(--purple-300);

    --card-background-orange:      var(--orange-200);
    --card-font-orange:            var(--orange-700);
    --card-subtitle-orange:        var(--orange-500);
}


// TODO: Remove and replace with custom props that drive new sidebar
//variables used for sidebar
$sidebar-background-dark-blue: $teal-700;

$sidebar-background-blue:      $teal-100 !default;
$sidebar-font-blue:            $teal-700 !default;
$sidebar-subtitle-blue:        $teal-500 !default;

$sidebar-background-green:      $green-100 !default;
$sidebar-font-green:            $green-700 !default;
$sidebar-subtitle-green:        $green-300 !default;

$sidebar-background-yellow:      $yellow-100 !default;
$sidebar-font-yellow:            $yellow-700 !default;
$sidebar-subtitle-yellow:        $yellow-500 !default;

$sidebar-background-brown:      #d6c1ab !default;
$sidebar-font-brown:            #75442e !default;
$sidebar-subtitle-brown:        #a47e65 !default;

$sidebar-background-purple:      $purple-100 !default;
$sidebar-font-purple:            $purple-700 !default;
$sidebar-subtitle-purple:        $purple-300 !default;


$sidebar-background-orange:      $orange-100 !default;
$sidebar-font-orange:            $orange-700 !default;
$sidebar-subtitle-orange:        $orange-300 !default;


// Small screen / tablet
//** Deprecated `$screen-sm` as of v3.0.1
$screen-sm:                      768px !default;
$screen-sm-min:                  $screen-sm !default;
//** Deprecated `$screen-tablet` as of v3.0.1
$screen-tablet:                  $screen-sm-min !default;

// Medium screen / desktop
//** Deprecated `$screen-md` as of v3.0.1
$screen-md:                  992px !default;
$screen-md-min:              $screen-md !default;
//** Deprecated `$screen-desktop` as of v3.0.1
$screen-desktop:             $screen-md-min !default;

// Large screen / wide desktop
//** Deprecated `$screen-lg` as of v3.0.1
$screen-lg:                  1200px !default;
$screen-lg-min:              $screen-lg !default;
//** Deprecated `$screen-lg-desktop` as of v3.0.1
$screen-lg-desktop:          $screen-lg-min !default;

$filter-blue:         darken($blue-500, 10%);
$filter-azure:        darken($cyan-500, 10%);
$filter-green:        darken($green-500, 10%);
$filter-orange:       darken($orange-500, 10%);
$filter-red:          darken($red-500, 10%);

// variable used in footers
$black-footer-bg:            $black !default;

$brown-font-color:    $grey-200 !default;
$brown-font-color-hover: $grey-400 !default;



// variables for Bootstrap Select 1.12.1
$color-red-error: $red-300 !default;
$color-grey-arrow: rgba($grey-700, 0.2) !default;


$width-default: 100% !default; // 3 960px-grid columns

$zindex-select-dropdown: 1060 !default; // must be higher than a modal background (1050)

//** Placeholder text color
$input-color-placeholder: $grey-500 !default;

$legend-color:                   $grey-500 !default;
$legend-border-color:            $grey-300 !default;

$dropdown-link-hover-bg:         $grey-300 !default;