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

$gap: 0.8rem;

// 8px at 10px $em-base
$topbar-height: 4.8rem;
$icon-bar-width: 4rem;
$icon-size-small: 2.4rem;
$hover-transition-time: 0.2s;
$search-input-height: 4.4rem;
$search-button-width: 5rem;
$footer-height: 5rem;
$usa-banner-height: 2.8rem;
$sidenav-expanded-width: 25rem;
$sidenav-collapsed-width: 10rem;

/*
 * 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: 2.3rem;
$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-blue-light: #e5f1ff;

$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-offwhite: #fbfbfd;
$color-black: #000000;
$color-black-light: #212121;

$color-gray-dark: #323a45;
$color-gray: #5b616b;
$color-gray-medium: #9b9b9b;
$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: #eff2f7;

$color-gold-dark: #cd841b;
$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: #4190e2;
$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(208, 219, 231, 0.5);
$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: 0px 2px 5px 0px $color-shadow;
$box-shadow-big: 0 4px 10px 0 rgba(193, 193, 193, 0.5);
$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;
