/*
==========================================================================
variables.scss contains all theme variables and mixins
*/

// Black and white
$black_dark: #111111;
$black: #212121;
$white: #FFFFFF;

// Greens
$green: #2F8540;
$green_light: #ADDC91;
$green_lightest: #E7F4E4;

// Grays
$gray_darkest: #43484E;
$gray_darker: #5C6065;
$gray_dark: #797D81;
$gray: #9A9DA1;
$gray_light: #D8D8D8;
$gray_lighter: #E6E7E9;
$gray_lightest: #F5F5F5;

// Blues
$blue_dark: #1F5593;
$blue: #205493;
$blue_light: #0071BC;
$blue_lighter: #A1CBFC;
$blue_lightest: #E1F3F8;

// Oranges and Reds
$red: #CD2026;
$red_light: #D96A4F;
$red_lightest: #E9A193;

$pink: #F9DEDE;

$gold: #FDB81E;
$gold_light: #F9C642;
$gold_lighter: #FAD980;
$gold_lightest: #FFF1D2;

// Deprecated. Will be removed in a future release
$orange: $gold;
$orange_light: $gold_light;
$orange_lightest: $gold_lightest;

// Element Variables
$text_area_border: rgba(0, 0, 0, 0.25);
$history_drawer_border_color: #D1D3D5;

// Theme Variables

$primary_color: $blue; // Site title, Tab label text, Header stroke
$primary_color_dark: $blue_dark; // Darker version of primary color often used for hover states
$action_color: $blue_light; // Links and Buttons
$action_color_dark: $blue; // Darker version of action color often used for hover states
$panel_background_color: $gray_lightest; // Table of contents background, subhead color, drawer color
$panel_border_color: $gray_light; // Colors the borders for panel_color
$panel_highlight_color: $blue_lightest; // Highlight color for table of contents
$panel_text_color: $black; // Text color for table of contents
$text_highlight_color: $green_lightest; // Text highlight used for diffs
$success_color: $green_lightest; // Used as background for success messages
$notice_color: $blue_lightest; // Used as background for neutral notice messages
$alert_color: $gold_lightest; // Used as background for caution messages
$warning_color: $pink; // Used as background for warning messages
$definition_border_color: $gray_light; // Bottom border/underline for the defined terms.

// Type Variables
$body_font: "Merriweather", Georgia, serif;
// Different fonts have different x-heights. Use a scaling factor to modify
// them. This variable is not used consistently yet, but whenever there's an
// issue with font sizes looking too large or small, we likely need to
// multiply by this variable.
// See https://github.com/18F/eregs-platform/issues/54
$sans_font_scale_factor: 1;

// Layout Variables
$closed_drawer_width: 40px;
$mainhead_height: 56px; // Height of your .main-head element. Used to calculate the fixed offsets.
$subhead_height: 34px;  // Height of your .sub-head element. Used to calculate the fixed offsets.


// Mixins
@mixin sans-font-light {
  font-family: "Source Sans Pro", Arial, sans-serif;
  font-weight: 300;
  font-style: normal;
}

@mixin sans-font-regular {
  font-family: "Source Sans Pro", Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
}

@mixin sans-font-bold {
  font-family: "Source Sans Pro", Arial, sans-serif;
  font-weight: 600;
  font-style: normal;
}

@mixin serif-font-italic {
  font-family: "Merriweather", Georgia, serif;
  font-weight: 400;
  font-style: italic;
}

@mixin serif-font-regular {
  font-family: "Merriweather", Georgia, serif;
  font-weight: 400;
  font-style: normal;
}

