// @import url('http://fonts.googleapis.com/css?family=Roboto:300,400,700')

// -- Colors
COLOR                       = #222222
BACKGROUND                  = #f5f5f5
THEME                       = #cccccc
WHITE                       = #ffffff
PRIMARY                     = #e91e63
SECONDARY                   = #00bcd4
// THEME                       = #ef6c00
CANCEL                      = red

// -- Fonts
FONT_FAMILY                 = "Roboto", "Helvetica Neue", "Helvetica", "sans-serif"
FONT_SIZE                   = 16px
FONT_SIZE_TINY              = 80%
FONT_SIZE_SMALL             = 90%
FONT_SIZE_NORMAL            = 100%
FONT_SIZE_BIG               = 120%
FONT_WEIGHT_THIN            = 300
FONT_WEIGHT_NORMAL          = 400
FONT_WEIGHT_BOLD            = 700

// -- Sizes
UNIT                        = 4rem
SPACE                       = (UNIT * 0.29)
OFFSET                      = (SPACE * 1.75)
MENU_WIDTH                  = (3.85 * UNIT)
HEADER_HEIGHT               = (1.65 * UNIT)
BUTTON_HEIGHT               = (2.5 * SPACE)
BUTTON_CIRCLE_HEIGHT        = (2.75 * SPACE)
LOADING_HEIGHT              = (1.5 * UNIT)

// -- Shadows
ZDEPTH_SHADOW_1             = 0 1px 6px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.24)
ZDEPTH_SHADOW_2             = 0 3px 10px rgba(0,0,0,0.16), 0 3px 10px rgba(0,0,0,0.23)
ZDEPTH_SHADOW_3             = 0 10px 30px rgba(0,0,0,0.19), 0 6px 10px rgba(0,0,0,0.23)
ZDEPTH_SHADOW_4             = 0 14px 45px rgba(0,0,0,0.25), 0 10px 18px rgba(0,0,0,0.22)
ZDEPTH_SHADOW_5             = 0 19px 60px rgba(0,0,0,0.30), 0 15px 20px rgba(0,0,0,0.22)

// -- Animations
ANIMATION_DURATION          = 450ms
ANIMATION_EASE              = cubic-bezier(.55,0,.1,1)
ANIMATION_DELAY             = (ANIMATION_DURATION / 5)


// normalize v3.0.2 | MIT License | git.io/normalize

html
  font-family Roboto, sans-serif
  -ms-text-size-adjust 100%
  -webkit-text-size-adjust 100%

body
  margin 0

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
nav, section, summary
  display block

audio, canvas, progress, video
  display inline-block
  vertical-align baseline

audio
  &:not([controls])
    display none
    height 0

[hidden], template
  display none

a
  background-color transparent
  &:active, &:hover
    outline 0

abbr[title]
  border-bottom 1px dotted

b, strong
  font-weight bold

dfn
  font-style italic

h1
  font-size 2em
  margin 0.67em 0

mark
  background #ff0
  color #000

small
  font-size 80%

sub, sup
  font-size 75%
  line-height 0
  position relative
  vertical-align baseline

sup
  top -0.5em

sub
  bottom -0.25em

img
  border: 0

svg
  &:not(:root)
    overflow hidden

figure
  border: 0

hr
  -moz-box-sizing content-box
  box-sizing content-box
  height 0

pre
  overflow auto

code, kbd, pre, samp
  font-family monospace, monospace
  font-size 1em

button, input, optgroup, select, textarea
  color inherit
  font inherit
  margin 0

button
  overflow visible

button, select
  text-transform none

button, html input[type="button"], input[type="reset"], input[type="submit"]
  -webkit-appearance button
  cursor pointer

button[disabled], html input[disabled]
  cursor default

button::-moz-focus-inner, input::-moz-focus-inner
  border 0
  padding 0

input
  line-height normal

input[type="checkbox"], input[type="radio"]
  box-sizing border-box
  padding 0

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button
  height auto

input[type="search"]
  -webkit-appearance textfield
  -moz-box-sizing content-box
  -webkit-box-sizing content-box
  box-sizing content-box

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration
  -webkit-appearance none

fieldset
  border 1px solid #c0c0c0
  margin 0 2px
  padding 0.35em 0.625em 0.75em

legend
  border 0
  padding 0

textarea
  overflow auto

optgroup
  font-weight bold

table
  border-collapse collapse
  border-spacing 0

td, th
  padding 0


// -- App ----------------------------------------------------------------------
a,abbr,address,article,aside,audio,b,blockquote,body,caption,cite,code,dd,del,dfn,dialog,div,dl,dt,em,fieldset,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video
  border: 0
  margin: 0
  outline: 0
  padding: 0

*, *:before, *:after
  margin: 0
  padding: 0
  box-sizing: border-box

html
  position: absolute
  height: 100%
  width: 100%
  margin: 0
  padding: 0
  overflow: hidden

body
  width: 100%
  height: 100%
  margin: 0
  padding: 0
  -webkit-touch-callout: none
  -webkit-user-select: none
  -moz-user-select: moz-none
  user-select: none
  overflow: hidden

  *
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0)

h1, h2, h3, h4, h5, h6, label, p, button, abbr, a, span, small
  -webkit-font-smoothing: RENDER = antialiased
  font-smoothing: RENDER
  -webkit-text-size-adjust: 100%
  -ms-text-size-adjust: 100%
  text-size-adjust: 100%

a
  text-decoration: none
  -webkit-tap-highlight-color: rgba(0,0,0,0)

::-webkit-scrollbar
  width: 0px
  height: 0px

input:not([type="checkbox"]):not([type="radio"]), button
  -webkit-appearance: none
  -moz-appearance: none
  appearance: none
  -webkit-touch-callout: none
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0)
  outline: none