// These variables drive almost every aspect of the U.S. Web Design
// system. Every variable is declared as !default so that it can be
// overridden by a previous import.
//
// XXX Do not modify this file!
//
// If you want to override a variable, set that variable in one of your
// own partials, then @import '{path/to/uswds/}core/variables'.

// Typography
// Removing the !default from $em-base so we are not inheriting that
// value from Bourbon.
$em-base:             10px;
$base-font-size:      1.7rem !default;
$small-font-size:     1.4rem !default;
$lead-font-size:      2rem !default;
$title-font-size:     5.2rem !default;
$h1-font-size:        4rem !default;
$h2-font-size:        3rem !default;
$h3-font-size:        2rem !default;
$h4-font-size:        1.7rem !default;
$h5-font-size:        1.5rem !default;
$h6-font-size:        1.3rem !default;
$base-line-height:    1.5 !default;
$heading-line-height: 1.3 !default;
$lead-line-height:    1.7 !default;

$font-sans:           'Source Sans Pro', $helvetica !default;
$font-serif:          'Merriweather', $georgia !default;

$font-normal:         400 !default;
$font-bold:           700 !default;

// Color
$color-primary:              #0071bc !default;
$color-primary-darker:       #205493 !default;
$color-primary-darkest:      #112e51 !default;

$color-primary-alt:          #02bfe7 !default;
$color-primary-alt-dark:     #00a6d2 !default;
$color-primary-alt-darkest:  #046b99 !default;
$color-primary-alt-light:    #9bdaf1 !default; // lighten($color-primary-alt, 60%)
$color-primary-alt-lightest: #e1f3f8 !default; // lighten($color-primary-alt, 90%)

$color-secondary:            #e31c3d !default;
$color-secondary-dark:       #cd2026 !default;
$color-secondary-darkest:    #981b1e !default;
$color-secondary-light:      #e59393 !default; // lighten($color-secondary, 60%)
$color-secondary-lightest:   #f9dede !default; // lighten($color-secondary, 90%)

$color-white:                #ffffff !default;
$color-base:                 #212121 !default;
$color-black:                #000000 !default;

$color-gray-dark:            #323a45 !default;
$color-gray:                 #5b616b !default; // lighten($color-gray-dark, 20%)
$color-gray-medium:          #757575 !default; // lightest gray that passes color contrast
$color-gray-light:           #aeb0b5 !default; // lighten($color-gray-dark, 60%)
$color-gray-lighter:         #d6d7d9 !default; // lighten($color-gray-dark, 80%)
$color-gray-lightest:        #f1f1f1 !default; // lighten($color-gray-dark, 91%)

$color-gray-warm-dark:       #494440 !default;
$color-gray-warm-light:      #e4e2e0 !default; // lighten($color-gray-warm-dark, 90%)
$color-gray-cool-light:      #dce4ef !default; // lighten($color-primary, 90%)

$color-gold:                 #fdb81e !default;
$color-gold-light:           #f9c642 !default; //  lighten($color-gold, 20%)
$color-gold-lighter:         #fad980 !default; //  lighten($color-gold, 60%)
$color-gold-lightest:        #fff1d2 !default; //  lighten($color-gold, 83%)

$color-green:                #2e8540 !default;
$color-green-light:          #4aa564 !default; // lighten($color-green, 20%)
$color-green-lighter:        #94bfa2 !default; // lighten($color-green, 60%)
$color-green-lightest:       #e7f4e4 !default; // lighten($color-green, 60%)

$color-cool-blue:            #205493 !default;
$color-cool-blue-light:      #4773aa !default; // lighten($color-cool-blue, 20%)
$color-cool-blue-lighter:    #8ba6ca !default; // lighten($color-cool-blue, 60%)
$color-cool-blue-lightest:   #dce4ef !default; // lighten($color-cool-blue, 90%)

$color-focus:                #3e94cf !default;
$color-visited:              #4c2c92 !default;

$color-shadow:               rgba(#000, 0.3) !default;

// Mobile First Breakpoints
$small-screen:  481px !default;
$medium-screen: 600px !default;
$large-screen:  1201px !default;

// Grid column counts by screen size
$grid-columns-small: 1 !default;
$grid-columns-medium: 6 !default;
$grid-columns-large: 12 !default;

// @media single-keyword helpers
$small: new-breakpoint(min-width $small-screen $grid-columns-small) !default;
$medium: new-breakpoint(min-width $medium-screen $grid-columns-medium) !default;
$large: new-breakpoint(min-width $large-screen $grid-columns-large) !default;

// Relative font and image file paths
$font-path:   '../fonts' !default;
$image-path:  '../img' !default;

// Set $asset-pipeline to true if you're using the Rails Asset Pipeline
$asset-pipeline:      false !default;

// Magic Numbers
$text-max-width:      53rem !default;
$lead-max-width:      77rem !default;
$site-max-width:      1040px !default;
$site-margins:        3rem !default;
$site-margins-mobile: 1.5rem !default;
$article-max-width:   600px !default;
$input-max-width:     46rem !default;
$border-radius:       3px !default;
$box-shadow:          0 0 2px $color-shadow !default;
$focus-shadow:        0 0 3px $color-focus, 0 0 7px $color-focus !default;
$nav-width:           951px !default;

// 44 x 44 pixels hit target following Apple iOS Human Interface
// Guidelines
$hit-area: 4.4rem !default;