// Global colors
//---------------------

$color-primary:                   rgba(0, 0, 0, 0.87);
$color-secondary:                 rgba(0, 0, 0, 0.54);
$color-disabled:                  rgba(0, 0, 0, 0.38);
$color-error:                     rgb(244, 67, 54);
$color-badge:                     rgba(255, 82, 82, 1);
$color-toast:                     rgba(46, 46, 46, 1);
$color-divider:                   rgba(0, 0, 0, 0.12);
$color-window:                    rgb(238, 238, 238);
$color-content:                   rgb(250, 250, 250);

$font-family:               Roboto, 'Helvetica Neue', sans-serif;
$font-size:                 10px;

// Layout
// -----------------------

$baseline-grid:            8px;
$layout-breakpoint-sm:     704px;
$layout-breakpoint-md:     1024px;
$layout-breakpoint-lg:     1440px;
$layout-gutter-width:      ($baseline-grid * 2);


// Global Z-Depth
//---------------

$z-depth-1: 0 1px 5px 0 rgba(0, 0, 0, 0.26);
$z-depth-2: 0 8px 17px rgba(0, 0, 0, 0.2);
$z-depth-3: 0 17px 50px rgba(0, 0, 0, 0.19);
$z-depth-4: 0 16px 28px 0 rgba(0, 0, 0, 0.22);
$z-depth-5: 0 27px 24px 0 rgba(0, 0, 0, 0.2);

// Opacity
//---------------------

$opacity-primary:                  0.87;
$opacity-secondary:                0.54;
$opacity-disabled:                 0.38;

// Dividers, Shadows and other graphical elements
//--------------------------------------------------

$divider-border:                   1px solid $color-divider;
$box-shadow:                       0 2px 5px 0 rgba(0, 0, 0, 0.26);
$border-radius:                    2px;


// Global fonts
//---------------------

$font-size-display4:              112px;
$font-weight-display4:            300;
$letter-spacing-display4:         -.01em;
$line-height-display4:            112px;
$font-display4:                   normal $font-weight-display4 $font-size-display4 $font-family;

$font-size-display3:              56px;
$font-weight-display3:            400;
$letter-spacing-display3:         -.005em;
$line-height-display3:            56px;
$font-display3:                   normal $font-weight-display3 $font-size-display3 $font-family;

$font-size-display2:              45px;
$font-weight-display2:            400;
$line-height-display2:            64px;
$font-display2:                   normal $font-weight-display2 $font-size-display2 $font-family;

$font-size-display1:              34px;
$font-weight-display1:            400;
$line-height-display1:            40px;
$font-display1:                   normal $font-weight-display1 $font-size-display1 $font-family;

$font-size-headline:              24px;
$font-weight-headline:            400;
$line-height-headline:            32px;
$font-headline:                   normal $font-weight-headline $font-size-headline $font-family;

$font-size-title:                 20px;
$font-weight-title:               500;
$letter-spacing-title:            .005em;
$font-title:                      normal $font-weight-title $font-size-title $font-family;

$font-size-subhead1:               16px;
$font-weight-subhead1:             400;
$letter-spacing-subhead1:          .01em;
$line-height-subhead1:             24px;
$font-subhead1:                    normal $font-weight-subhead1 $font-size-subhead1 $font-family;

$font-size-subhead2:               16px;
$font-weight-subhead2:             500;
$letter-spacing-subhead2:          .01em;
$line-height-subhead2:             24px;
$font-subhead2:                    normal $font-weight-subhead2 $font-size-subhead2 $font-family;

$font-size-body1:                 14px;
$font-weight-body1:               400;
$letter-spacing-body1:            .01em;
$line-height-body1:               20px;
$font-body1:                      normal $font-weight-body1 $font-size-body1 $font-family;

$font-size-body2:                 14px;
$font-weight-body2:               500;
$letter-spacing-body2:            .01em;
$line-height-body2:               24px;
$font-body2:                      normal $font-weight-body2 $font-size-body2 $font-family;

$font-size-caption:               12px;
$font-weight-caption:             400;
$letter-spacing-caption:          .02em;
$font-caption:                    normal $font-weight-caption $font-size-caption $font-family;

$font-size-button:                14px;
$font-weight-button:              500;
$font-button:                     normal $font-weight-button $font-size-button $font-family;