// Configuration File

// Globals
$font-family--default:          Helvetica, Arial, sans-serif !default;
$font-family--monospaced:       "Courier New", monospace !default;
$font-family--headline:         $font-family--default !default;

$default-padding:               1rem   !default;
$default-margin:                1rem   !default;
$default-border-radius:         3px    !default;
$default-line-height:           1.45em !default;

// Document responsive screen size rules
$resolution--mini:               480px !default;
$resolution--small:              768px !default;
$resolution--medium:            1024px !default;
$resolution--large:             1280px !default;

$resolution-font-size--mini:    62.50% !default;
$resolution-font-size--small:   75.00% !default;
$resolution-font-size--medium:  87.50% !default;
$resolution-font-size--large:     100% !default;
$resolution-font-size--xlarge:    100% !default;

// Helper
$content--max-width:            62rem !default;

// Colors
$color-black:                   rgb(0, 0, 0)       !default;
$color-white:                   rgb(255, 255, 255) !default;
$color-grey-dark:               rgb(80, 80, 80)    !default;
$color-grey-middle:             rgb(120, 120, 120) !default;
$color-grey-light:              rgb(229, 229, 229) !default;
$color-grey-bright:             rgb(244, 244, 244) !default;
$color-red-dark:                rgb(198, 43, 44)   !default;
$color-blue-bright:             rgb(216, 237, 248) !default;
$color-green-bright:            rgb(223, 240, 215) !default;
$color-yellow-bright:           rgb(252, 248, 226) !default;
$color-red-bright:              rgb(242, 222, 222) !default;


// State Colors
$color-state--active:           $color-grey-bright   !default;
$color-state--success:          $color-green-bright  !default;
$color-state--info:             $color-blue-bright   !default;
$color-state--warning:          $color-yellow-bright !default;
$color-state--danger:           $color-red-bright    !default;


// Body variables
$body--font-family:             $font-family--default !default;
$body--font-weight:             300 !default;
$body--font-color:              rgba($color-black, .8) !default;
$body--font-size:               1rem !default;
$body--background-color:        $color-white !default;

// Headline
$h--font-family:                $font-family--default !default;
$h--font-weight:                700 !default;
$h--font-color:                 $color-black !default;
$h-small--font-weight:          100 !default;
$h-small--size:                 .8em !default;
$h-small--font-color:           $color-grey-middle !default;
$h-abbr--font-weight:           100 !default;
$h-abbr--size:                  .6em !default;
$h-abbr--font-color:            $color-grey-middle !default;
$h-capital--border:             1px solid $color-grey-light !default;
$h-capital--alignment:          center !default;

// paragraph
$p--line-height:                2.0625rem !default;
$p--font-size:                  1.375rem !default;
$p--margin:                     $default-margin 0 !default;
$p--padding:                    0 !default;


// Strong
$strong--font-color:            $color-black !default;
$strong--font-weight:           700 !default;

$blockquote--padding:           $default-padding !default;
$blockquote--margin:            0 0 $default-margin !default;
$blockquote--font-size:         1.4em !default;
$blockquote---border-color:     $color-grey-light !default;
$blockquote-small--font-size:   .8em !default;
$blockquote-small--font-color:  $color-grey-middle !default;

// Link
$a--link:                       rgb(68, 132, 204) !default;
$a--hover:                      $a--link !default;
$a--active:                     $a--link !default;
$a--visited:                    $a--link !default;


// code
$code--font-size:               .9em !default;
$code--background-color:        $color-grey-bright !default;
$code--color:                   $color-red-dark !default;
$code--padding:                 .125rem .25rem !default;

// kbd
$kbd--font-color:               $color-white !default;
$kbd--background-color:         $color-grey-dark !default;

// hr
$hr--color:                     $color-grey-light !default;
$hr--line-width:                1px !default;

// pre
$pre--background-color:         $color-grey-bright !default;
$pre--font-color:               $body--font-color !default;
$pre--font-size:                1rem !default;
$pre--line-height:              $default-line-height !default;
$pre--margin:                   0 0 $default-margin !default;
$pre--padding:                  $default-padding !default;

// table
$table--background-color:       transparent !default;
$table--margin:                 0 0 $default-margin 0 !default;
$table--border-color:           $color-grey-light !default;
$table--line-height:            $default-line-height !default;
$table--font-size:              1rem !default;
$table-row--hover-color:        $color-blue-bright !default;
$table-cell--stripe-color:      $color-grey-light !default;
$table-cell--padding:           .5rem !default;
$table-caption--font-color:     $color-grey-dark !default;
$table-caption--alignment:      left !default;
$table-head--alignment:         left !default;
$table-head--font-weight:       700 !default;

// Button
$button--background-color:      rgba($color-black, .2) !default;
$button--font-color:            rgba($color-black, .8) !default;
$button--font-size:             1rem !default;
$button--line-height:           $default-line-height !default;
$button--padding:               .4rem .8rem !default;
$button--margin:                .3rem !default;
$button--border:                1px solid transparent !default;
$button-circle--size:           2.4rem !default;

// Tabulator
$tablulator--color:             rgb(130, 130, 130) !default;
$tablulator--border-color:      rgb(200, 200, 200) !default;

// spinners
$spinner--color:                rgb(0, 0, 0) !default;

// fieldset
$fieldset-hint-color: rgb(200, 200, 200);
$fieldset-font-size: 1rem;