/*
 * AT-ST Variables
 * ===================================================
 */

$gap:                     0.8rem; // 8px at 10px $em-base
$topbar-height:           4.8rem;
$icon-bar-width:          4.0rem;
$icon-size-small:         2.4rem;
$hover-transition-time:   0.2s;
$search-input-height:     4.4rem;
$search-button-width:     5.0rem;

/*
 * USWDS Variables
 * @see https://github.com/uswds/uswds/blob/develop/src/stylesheets/core/_variables.scss
 * ===================================================
 */

// $em-base:             10px; This is not defaulted in USWDS, so we cant override it
$base-font-size:      1.7rem;
$small-font-size:     1.4rem;
$lead-font-size:      2rem;
$title-font-size:     5.2rem;
$h1-font-size:        4rem;
$h2-font-size:        3rem;
$h3-font-size:        2rem;
$h4-font-size:        1.7rem;
$h5-font-size:        1.5rem;
$h6-font-size:        1.3rem;
$base-line-height:    1.5;
$heading-line-height: 1.3;
$lead-line-height:    1.7;

$font-sans:           'Source Sans Pro', sans-serif;
$font-serif:          'Merriweather', serif;

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

// Color
$color-blue:                 #0071bc;
$color-blue-darker:          #205493;
$color-blue-darkest:         #112e51;

$color-aqua:                 #02bfe7;
$color-aqua-dark:            #00a6d2;
$color-aqua-darkest:         #046b99;
$color-aqua-light:           #9bdaf1;
$color-aqua-lightest:        #e1f3f8;

$color-red:                  #e31c3d;
$color-red-dark:             #cd2026;
$color-red-darkest:          #981b1e;
$color-red-light:            #e59393;
$color-red-lightest:         #f9dede;

$color-white:                #ffffff;
$color-black:                #000000;
$color-black-light:          #212121;

$color-gray-dark:            #323a45;
$color-gray:                 #5b616b;
$color-gray-medium:          #757575;
$color-gray-light:           #aeb0b5;
$color-gray-lighter:         #d6d7d9;
$color-gray-lightest:        #f1f1f1;

$color-gray-warm-dark:       #494440;
$color-gray-warm-light:      #e4e2e0;
$color-gray-cool-light:      #dce4ef;

$color-gold:                 #fdb81e;
$color-gold-light:           #f9c642;
$color-gold-lighter:         #fad980;
$color-gold-lightest:        #fff1d2;

$color-green:                #2e8540;
$color-green-light:          #4aa564;
$color-green-lighter:        #94bfa2;
$color-green-lightest:       #e7f4e4;

$color-cool-blue:            #205493;
$color-cool-blue-light:      #4773aa;
$color-cool-blue-lighter:    #8ba6ca;
$color-cool-blue-lightest:   #dce4ef;

$color-purple:               #4c2c92;

// Functional colors
$color-primary:              $color-blue;
$color-primary-darker:       $color-blue-darker;
$color-primary-darkest:      $color-blue-darkest;

$color-primary-alt:          $color-aqua;
$color-primary-alt-dark:     $color-aqua-dark;
$color-primary-alt-darkest:  $color-aqua-darkest;
$color-primary-alt-light:    $color-aqua-light;
$color-primary-alt-lightest: $color-aqua-lightest;

$color-secondary:            $color-red;
$color-secondary-dark:       $color-red-dark;
$color-secondary-darkest:    $color-red-darkest;
$color-secondary-light:      $color-red-light;
$color-secondary-lightest:   $color-red-lightest;

$color-base:                 $color-black-light;
$color-focus:                $color-gray-light;
$color-visited:              $color-purple;

$color-overlay:              rgba(#000, 0.5);
$color-shadow:               rgba(#000, 0.3);
$color-transparent:          rgba(#000, 0);

// Mobile First Breakpoints
$small-screen:  481px;
$medium-screen: 600px;
$large-screen:  800px;
$xlarge-screen: 1200px;

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

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

// Set the base path for assets (used for font and image paths below)
$asset-path: '../static/';

// Relative font and image file paths
$font-path: '#{$asset-path}fonts';
$image-path: '#{$asset-path}img';

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

// Magic Numbers
$text-max-width:                66ch; // 66 characters per line
$lead-max-width:                77rem;
$site-max-width:                1200px; // previously 1040px;
$site-margins:                  $gap; // previously 3rem;
$site-margins-mobile:           $gap / 2; // previously 1.5rem;
$article-max-width:             600px;
$input-max-width:               46rem;
$label-border-radius:           2px;
$checkbox-border-radius:        2px;
$border-radius:                 3px;
$button-border-radius:          5px;
$box-shadow:                    0 0 2px $color-shadow;
$focus-outline:                 2px dotted $color-gray-light;
$focus-spacing:                 3px;
$nav-width:                     300px; // previously 951px;
$sidenav-current-border-width:  0.4rem; // must be in rem for math

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

$spacing-x-small: 0.5rem;
$spacing-small: 1rem;
$spacing-md-small: 1.5rem;
$spacing-medium: 2rem;
$spacing-large: 3rem;