/**
* Layout
**/
$header-height: 5.6rem;
$footer-height: 1.1em;


/**
* Colors
*/
// Main colors
$tint-shade-multiplier: 5%;

$colors: (
  text: (
    tint: lighten(#404040, $tint-shade-multiplier),
    base: #404040,
    shade: darken(#404040, $tint-shade-multiplier)
  ),
  default:(
    tint: lighten(#f0f0f0, $tint-shade-multiplier),
    base: #f0f0f0,
    shade: darken(#f0f0f0, $tint-shade-multiplier)
  ),
  primary: (
    tint: lighten(#B29D8D, $tint-shade-multiplier),
    base: #B29D8D,
    shade: darken(#B29D8D, $tint-shade-multiplier)
  ),

  primary2: (
    tint: lighten(#4f8ba3, $tint-shade-multiplier),
    base: #4f8ba3,
    shade: darken(#4f8ba3, $tint-shade-multiplier)
  ),

  success:(
    tint: #E3EED5,
    base:  #6D9F36,
    shade: darken(#0f9d58, $tint-shade-multiplier),
  ),
  warning: (
    tint: #F6EAD7,
    base: #CE8525,
    shade: darken(#FF9800, $tint-shade-multiplier)
  ),
  danger:(
    tint: lighten(#F44336, $tint-shade-multiplier),
    base:#F44336,
    shade: darken(#F44336, $tint-shade-multiplier)
  ),
  star:(
    tint: lighten(#f1c40f, $tint-shade-multiplier),
    base: #f1c40f,
    shade: darken(#f1c40f, $tint-shade-multiplier)
  ),

  disabled: (
    base: #cbd9df
  ),

  // Theme
  variable: (
    base:#D9D0C8
  ),
  titles: (
    base: #977864
  ),
  volet1: (
    base: #FFF
  ),
  volet2:(
    base: #E5D8CF
  )
);

@function color($color, $tone: base) {
  @return map-get(map-get($colors, $color), $tone);
}

$font-color: color(text) !default;
$color-primary: color(primary) !default;
$color-success: color(success) !default;
$color-warning: color(warning) !default;

// Greys Shades
$greys: (
  white: hsl(0, 0%, 100%),
  5%: hsl(0, 0%, 95%),
  10%: hsl(0, 0%, 90%),
  15%: hsl(0, 0%, 85%),
  20%: hsl(0, 0%, 80%),
  30%: hsl(0, 0%, 70%),
  40%: hsl(0, 0%, 60%),
  50%: hsl(0, 0%, 50%),
  60%: hsl(0, 0%, 40%),
  70%: hsl(0, 0%, 30%),
  80%: hsl(0, 0%, 20%),
  90%: hsl(0, 0%, 10%),
  black: hsl(0, 0%, 0%)
);

@function greys($level) {
  @return map_get($greys, $level);
}


/**
* Shadow
*/
$shadows:(
 1: (0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12)),
 2: ( 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15)),
 3: (0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)),
 4: (0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19)),
 5: (0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21)),
 6: (0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22)),
);

@mixin shadow($depth) {
  box-shadow: map_get($shadows, $depth);
}


/**
* Levels
*/
$layers: (
  dropdown:7,
  tooltip:6,
  modal: 5,
  sidebar: 4,
  footer: 3,
  toolbar: 2,
  header:2,
  disabled:-1,
);

@mixin depth($layer) {
  z-index: map_get($layers, $layer);
}


// TODO: Breakpoints
