codeforamerica/michigan-benefits

// Fonts
$font-system:         -apple-system, BlinkMacSystemFont,
"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
"Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;

$font-icon:           'icomoon';


// Typopgrahy
$em-base:             10px;
$font-size-normal:    rem(19px);
$font-size-small:     rem(16px);
$font-size-smallest:  rem(12px);
$font-size-h1:        rem(36px);
$font-size-h2:        rem(28px);
$font-size-h3:        rem(24px);
$font-size-h4:        rem(19px);
$line-height-normal:  1.5em;
$line-height-display: 1.3em;


// Colors
$color-background:    #fafaf9;
$color-medium-grey:   #919191;
$color-dark-grey:     #666;
$color-darkest-grey:  #30302f;
$color-green:         #093;
$color-grey:          #aaa;
$color-light-grey:    #eaeae9;
$color-magenta:       #a6005e;
$color-orange:        #d48c00;
$color-red:           #d40000;
$color-sky:           #029FCF;
$color-tan:           #dfd7cc;
$color-teal:          #019c86;
$color-white:         #fff;
$color-yellow:        #ffc61e;
$color-bright-yellow: #ff0;
$color-light-sky:     lighten($color-sky, 50%);
$color-dark-sky:      shade($color-sky, 15%);
$color-darkest-sky:      shade($color-sky, 30%);

// Breakpoints
$mobile-up:           481px;
$tablet-up:           601px;
$site-max-up:         961px;


// Magic Numbers
$site-margins:        40px;
$site-max-width:      960px;
$border-radius:       2px;
$footer-height:       320px;
$tooltip-width:       250px;


// Padding Sizes
$padding-small:   1rem;
$padding-med:     3.8rem;
$padding-large:   7.6rem;
$padding-huge:    15.2rem;


// Image Sizes
$width-image-icon:    1.5em;
$width-image-small:   6em;
$width-image-med:     8em;
$width-image-large:   10em;


// Form Widths
$width-form-med:        12em;
$width-form-long:       20em;
$width-form-short:      6em;
$width-form-casenumber: 8em;
$width-form-phone:      8em;
$width-form-name:       12em;
$width-form-zip:        5em;
$width-form-ssn:        7em;
$width-form-searchbar:  30em;
$width-form-year:       6em;
$width-form-month:      3em;
$width-form-day:        3em;


// Form Colors
$form-color-border: $color-dark-grey;
$form-color-border-focus:  $color-orange;
$form-focus: 3px solid $form-color-border-focus;


// Border Colors
$border-color: $color-light-grey;

// Button Colors
$button-color: $color-light-grey;
$button-border-color: $color-grey;
$button-cta-color: $color-sky;
$button-cta-border-color: $color-dark-sky;


// Animations
$animation-fast:      .1s ease-out;
$animation-med:      .2s ease-out;


// Michigan Benefits
$step-header-height:  54px;
$max-width: 72rem;