// ---------------------------------------------------------------------------
// ---------------------------------------------------------------------------
// NEW variables specific to FSA
// or OVERRIDES those set in USWDS-provided `_defaults.scss`

// ---------------------------------------------------------------------------
// Sizing Units

$size-base          : .4rem;            // 4px
$size-small         : $size-base * 2;   // 8px
$size-default       : $size-base * 3;   // 12px
$size-medium        : $size-base * 6;   // 24px
$size-large         : $size-base * 9;   // 36px
$size-extra-large   : $size-medium * 2; // 48px

$site-max-width: 1200px;

// ---------------------------------------------------------------------------
// Icon sizing

$icon-size-auto: 1.0588235294em;  // 18px at base font size
$icon-size-0:    $size-base * 3;  // 12px
$icon-size-1:    $size-base * 4.5;// 18px
$icon-size-2:    $size-base * 6;  // 24px
$icon-size-3:    $size-base * 9;  // 36px
$icon-size-4:    $size-base * 12; // 48px
$icon-size-5:    $size-base * 18; // 72px
$icon-size-6:    $size-base * 24; // 96px

// ---------------------------------------------------------------------------
// Colors

// Core Colors
$color-fsa-primary: shade($color-green, 25%); // from USWDS
$color-fsa-primary-300: tint($color-fsa-primary, 19%);
$color-fsa-primary-200: tint($color-fsa-primary, 65%);
$color-fsa-primary-100: tint($color-fsa-primary, 85%);
$color-fsa-primary-900: shade($color-fsa-primary, 25%);

$color-fsa-secondary: $color-primary-darker; // from USWDS
$color-fsa-secondary-300: tint($color-fsa-secondary, 21%);
$color-fsa-secondary-200: tint($color-fsa-secondary, 70%);
$color-fsa-secondary-100: tint($color-fsa-secondary, 85%);
$color-fsa-secondary-900: shade($color-fsa-secondary, 25%);

$color-fsa-tertiary: $color-gray-warm-dark; // from USWDS
$color-fsa-tertiary-300: tint($color-fsa-tertiary, 24%);
$color-fsa-tertiary-200: tint($color-fsa-tertiary, 80%);
$color-fsa-tertiary-100: tint($color-fsa-tertiary, 92%);
$color-fsa-tertiary-900: shade($color-fsa-tertiary, 35%);

// Accent Colors
$color-fsa-aqua: $color-primary-alt-dark; // from USWDS
$color-fsa-aqua-300: $color-primary-alt;
$color-fsa-aqua-200: $color-primary-alt-light;
$color-fsa-aqua-100: $color-primary-alt-lightest;
$color-fsa-aqua-900: $color-primary-alt-darkest;

$color-fsa-red: $color-secondary-dark; // from USWDS
$color-fsa-red-300: tint($color-secondary-dark, 40%);
$color-fsa-red-200: tint($color-secondary-dark, 70%);
$color-fsa-red-100: tint($color-secondary-dark, 88%);
$color-fsa-red-900: $color-secondary-darkest;

$color-fsa-yellow: $color-gold; // from USWDS
$color-fsa-yellow-300: $color-gold-light;
$color-fsa-yellow-200: $color-gold-lighter;
$color-fsa-yellow-100: $color-gold-lightest;

// Base
$color-base:  $color-fsa-tertiary-900;
$color-white: #fff;
$color-black: #000;
$color-fsa-white: $color-white; // Just in case
$white: $color-fsa-white;  // Just in case
$color-fsa-black: $color-black; // Just in case
$color-fsa-base: $color-base;

$color-fsa-link: darken($color-primary, 3%); // 006bb3
$color-fsa-link-hover: $color-fsa-secondary-900;
$color-fsa-link-visited: $color-fsa-link;

$color-fsa-selection-bg: $color-fsa-secondary-100;

// Semantic
$color-title: $color-fsa-tertiary;
$color-fsa-site-bg: #f7f7f7;
$color-fsa-site-backcground: $color-fsa-site-bg;
$color-fsa-base-bg: $color-fsa-site-bg;
$color-fsa-base-background: $color-fsa-site-bg;

$marker-text-color: $color-base;

$marker-bgc: $color-fsa-tertiary-200;
$marker-bgc-neutral: $color-fsa-white;
$marker-bgc-general: $color-fsa-secondary-200;
$marker-bgc-alert: $color-fsa-red-200;
$marker-bgc-warning: $color-fsa-yellow-200;
$marker-bgc-success: $color-fsa-primary-200;

// ---------------------------------------------------------------------------
// Borders

$border-none : 0;
$border-xxs  : 1px;
$border-xs   : math.div($size-base, 2);
$border-s    : $size-base;
$border-m    : $size-small;
$border-l    : $size-default;

$radius-none : 0;
$radius-s    : $size-base;
$radius-m    : ($size-base * 2);
$radius-l    : ($size-base * 4);
$radius-full : 999.9rem;
$radius-oval : 100%;

// ---------------------------------------------------------------------------
// Shadows
$shadow-color: transparentize($color-fsa-tertiary, .85);

$shadow-size-popout:  0 $size-default  $size-default (-$size-default) $shadow-color, 0 $size-medium $size-large   $size-base  $shadow-color   , 0 $size-small    $size-extra-large $size-small    $shadow-color;
$shadow-size-overlay: 0 $size-base     $size-base    (-($size-base))  $shadow-color, 0 $size-small  $size-default math.div($size-base, 2) $shadow-color, 0 $size-base $size-default math.div($size-base, 2) $shadow-color;
$shadow-size-raised:  0 math.div($size-base, 2) $size-base    (-($size-base))  $shadow-color, 0 $size-base   $size-base 0  $shadow-color, 0 math.div($size-base, 2) $size-default 0 $shadow-color;
$shadow-size-none:    none;

// ---------------------------------------------------------------------------
// Typography

$line-height-flat:              1;
$line-height-extra-small:       2rem;
$line-height-small:             2.4rem;
$line-height-medium:            2.8rem;
$line-height-large:             3.6rem;
$line-height-extra-large:       5.2rem;
$line-height-extra-extra-large: 6.4rem;

$base-line-height: $line-height-small;

// Font Size Scale
$font-size-0 : $h6-font-size;           // 13px
$font-size-1 : $small-font-size;        // 14px
$font-size-2 : $h5-font-size;           // 15px
$font-size-3 : $base-font-size;         // 17px
$font-size-4 : $h3-font-size;           // 20px
$font-size-5 : $h2-font-size;           // 30px
$font-size-6 : ($h1-font-size + .2rem); // 42px
$font-size-7 : $title-font-size;        // 52px

$h1-font-size: $font-size-6;

$lead-font-size: ($font-size-5 - .3rem);
$lead-line-height: 3.6rem;

$font-sans:  'Source Sans Pro', $helvetica;
$font-serif: $font-sans;
$font-mono:  "Bitstream Vera Sans Mono", "Consolas", "Menlo", "Monaco", "Courier New", "Courier", monospace;

$font-base:  $font-sans;

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

// ---------------------------------------------------------------------------
// Forms

$fsa-form-width: $size-base * 96;

$form-font                     : $font-sans;
$form-text-size                : $font-size-3;
$form-text-size--sm            : $font-size-1;
$form-text-size--lg            : $font-size-4;
$form-text-color               : $color-fsa-base;
$form-text-color-disabled      : tint($form-text-color, 40%);
$form-placeholder-color        : tint($form-text-color, 63%);
$form-outline-color            : tint($color-fsa-tertiary, 70%);
$form-focus-color              : #009afa;
$color-focus                   : $form-focus-color;

$form-error-color              : $color-fsa-red;
$form-error-color-focus        : $color-fsa-base;
$form-error-color-bg           : $color-fsa-red-100;

$form-positive-color           : $color-green; // Note this isn't $color-fsa-primary
$form-positive-color-focus     : $form-focus-color;
$form-positive-color-bg        : $color-white;

$form-disabled-bg-color        : $color-fsa-tertiary-100;
$form-disabled-bg-color--check-radio : $color-fsa-tertiary-200;
$form-border-radius            : 0; // currently zero, but play with this if you want

$form-checkbox-radio-outline-color : shade($form-outline-color, 30%);
$form-checkbox-radio-fill      : $color-fsa-secondary;
$form-checkbox-fill            : $color-fsa-secondary;
$form-radiocheckbox-size       : 1.8rem;
$form-height-default           : 4rem;
$form-height-small             : 3.2rem;
$form-height-large             : 4.8rem;
$form-padding                  : $size-small;

// ---------------------------------------------------------------------------
// FSA Grid Settings

$fsa-grid-gutter: $size-medium;
$fsa-grid-columns: 12;

// ---------------------------------------------------------------------------
// Breakpoint Settings (screen width)

$screen-s  : 30.0625em; //  481px at 16px base font
$screen-m  : 37.5em;    //  600px at 16px base font
$screen-l  : 54em;      //  864px at 16px base font
$screen-xl : 78.75em;   // 1260px at 16px base font