@import '../override-function';

//++++++++++++++++++++++++++++++++++++
// NOTE:
//
// For breakpoint variable values,
// see b-breakpoints.scss
//++++++++++++++++++++++++++++++++++++

//===================================
// Typography
//===================================
// These variables override values set in either
// ~uswds/src/stylesheets/core/defaults" or
// ~uswds/src/stylesheets/core/variables"

$georgia: "Georgia", "Cambria", "Times New Roman", "Times", serif;
$helvetica: "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
$font-sans: 'Source Sans Pro', $helvetica !default;
$font-serif:          "Bitter", $georgia;

$em-base: 100%;
$base-font-size: 1rem;

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

$h6-font-size:        scale-rem(1.5rem);

//===================================
// Magic Numbers
//===================================

$text-max-width:      scale-rem(70rem); // Note: USWDS value is 53rem;
$site-max-width:      1000px; //USWDS value is 1040px


//================
//  USWDS V3 Colors
//===============
$color-aqua:                 #00bde3;
$color-aqua-dark:            #009ec1;
$color-aqua-lightest:        #e1f3f8;
$color-blue:                 #005ea2;
$color-blue-darkest:         #162e51;

$color-primary:              $color-blue;
$color-primary-darker:       #1a4480;
$color-primary-darkest:      $color-blue-darkest;

$color-primary-alt:          $color-aqua;
$color-primary-alt-light:    #97d4ea;
$color-primary-alt-lightest: $color-aqua-lightest;
$color-primary-alt-dark:     #28a0cb;
$color-primary-alt-darkest:  #07648d;

$color-visited:              #54278f;
$color-link-default:         $color-primary;
$color-link-visited:         #54278f;
$color-link-active:          #0b4778;

$color-purple:               #54278f;
$color-light-blue: #005ea2;
$color-old-browser-background-start: #005ea2;
$color-old-browser-background-end: #162e51;

$color-white:                #ffffff;
$color-red:                  #d83933;
$color-red-lightest:         #f8dfe2;
$color-red-light:            #f2938c;
$color-red-dark:             #b50909;

$color-base:                 #1b1b1b;

$color-secondary:            $color-red;
$color-secondary-lightest:   $color-red-lightest;
$color-secondary-light:      $color-red-light;
$color-secondary-dark:       $color-red-dark;
$color-secondary-darkest:    #8b0a03;

$color-gray:                 #565c65;
$color-gray-light:           #a9aeb1;
$color-gray-light-alt:       #edeff0;
$color-gray-lighter:         #dfe1e2;
$color-gray-lightest:        #f0f0f0;
$color-gray-medium:          #757575;
$color-gray-dark:            #3d4551;
$color-gray-warm-light:      #e6e6e2;
$color-gray-warm-dark:       #454540;
$color-gray-cool-light:      #e1e7f1;

$color-green:                #008817;
$color-green-lightest:       #ecf3ec;
$color-green-lighter:        #b4d0b9;
$color-green-light:          #5e9f69;
$color-green-darker:         #154c21;

$color-gold-lightest:        #fef0c8;
$color-gold-lighter:         #ffe396;
$color-gold-light:           #face00;
$color-gold:                 #ffbe2e;
$color-gold-darker:          #936f38;

$color-orange: #dd7533;

$color-black:                #000;

$color-va-accent:            #8a7237; // New gold "metal" acccent
$color-feedback-warning-background:      #faf3d1; // Used for Disability benefits
$color-inset-bg:             #e7f6f8;
$color-gibill-accent:        #fef0c8; // TODO: Replace with $color-gold-lightest;
$focus-outline:              2px solid $color-gold-light;

$color-hub-family-member: $color-primary-darker;
$color-hub-service-member: $color-primary-darker;

$color-focus:                #3e94cf;

$color-cool-blue:           #205493;
$color-cool-blue-light:     #4773aa;
$color-cool-blue-lighter:   #8ba6ca;
$color-cool-blue-lightest:  #dce4ef;
//===================================
// DSVA colors
// Places where DSVA is going rogue!
//===================================


$color-black:                #000;
/* 
ADDED TO CSS-LIBRARY
file: tokens/color.json
issue: vets-design-system-documentation#2042
*/

$color-link-default-hover:   rgba($color-black, 0.05);

$color-va-modal-bg:          rgba($color-gray-dark, .8);

$color-white-alpha70:        rgba(255,255,255,.7);

$color-sidebar-nav-bg:   rgba($color-black, 0.25);

//===================================
// Hub Icon colors for BC
//
//===================================

$color-hub-health-care: #3f57a6;
$color-hub-education: #40807e;
$color-hub-disability: #a23737;
$color-hub-careers: #bd5727;
$color-hub-pension: #4d8055;
$color-hub-housing: #8e704f;
$color-hub-life-insurance: #6f7a41;
$color-hub-burials: #2378c3;
$color-hub-records: #864381;


//===================================
// Deprecated Colors;
// Please avoid using.
//===================================

$polar:       #e7f6f8;
$wild-sand:   #f6f6f6;
$green-white: #f5f0e6;
$olso-gray:   #8d9297;
$light-blue:  #e1f3f8;
$mm-gray:     #f0f0f0;

//===================================
// Z-index values
//===================================
$base-layer: 0;
$low-layer: 100;
$middle-layer: 200;
$top-layer: 300;
$modal-layer: 400;


//===================================
// Spacing
//===================================
/*
## Learn more
- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)
*/
$multiple: 8px !default;

// Map is used for margin and padding utilities.
$spacers: (
  0:    0,
  1px:  1px,
  0p25: $multiple * 0.25,
  0p5:  $multiple * 0.5,
  1:    $multiple,
  1p5:  $multiple * 1.5,
  2:    $multiple * 2,
  2p5:  $multiple * 2.5,
  3:    $multiple * 3,
  4:    $multiple * 4,
  5:    $multiple * 5,
  6:    $multiple * 6,
  7:    $multiple * 7,
  8:    $multiple * 8,
  9:    $multiple * 9
) !default;

// Map for spacing tokens in Rems
$units:(
  0:      0,
  1px:    .1,
  .25:    .2,
  .5:     .4,
  1:      .8,
  1.5:    1.2,
  2:      1.6,
  2.5:    2,
  3:      2.4,
  4:      3.2,
  5:      4,
  6:      4.8,
  7:      5.6,
  8:      6.4,
  9:      7.2,
  10:     8,
  15:     12,
  -1px:    -.1,
  -.25:    -.2,
  -.5:     -.4,
  -1:      -.8,
  -1.5:    -1.2,
  -2:      -1.6,
  -2.5:    -2,
  -3:      -2.4,
  -4:      -3.2,
  -5:      -4,
  -6:      -4.8,
  -7:      -5.6,
  -8:      -6.4,
  -9:      -7.2,
  -10:     -8,
  -15:     -12,
);


//====================================
// Grid columns
//===================================
$grid-columns: 12 !default;


//====================================
// Asset path overrides
//===================================
$formation-asset-path: '../assets' !default;
$formation-image-path: "#{$formation-asset-path}/img" !default;
$formation-font-path: "#{$formation-asset-path}/fonts" !default;