// Colors
$color-primary: hsl(0, 0%, 13%);
$color-secondary: hsl(0, 0%, 29%);
$color-grey: hsl(0, 0%, 47%);
$color-offgrey: hsl(0, 0%, 82%);
$color-offwhite: hsl(0, 0%, 95%);
$color-white: hsl(0, 0%, 100%);

$color-tribune-yellow: hsl(46, 100%, 50%);
$color-tribune-blue: hsl(193, 36%, 50%);
$color-tribune-light-blue: hsl(193, 49%, 75%);

$color-facebook: hsl(220, 63%, 47%);
$color-twitter: hsl(206, 82%, 63%);

// elections colors
$color-elections-republican: #f2593b;
$color-elections-democrat: #1755c5;
$color-elections-yellow: #ffc200;
$color-elections-green: #3cc687;
$color-elections-gray: #99a0af;
$color-elections-offwhite: #f7f7f7;
$color-elections-navy: #1a2b4b;
$color-elections-pink: #fcc2b6;

// political party colors
$color-republican: hsl(1, 64%, 56%);
$color-republican-subset: hsl(1, 34%, 56%);
$color-democrat: hsl(203, 77%, 39%);
$color-democrat-subset: hsl(203, 47%, 39%);
$color-green: hsl(135, 23%, 40%);
$color-libertarian: hsl(47, 71%, 53%);
$color-independent: hsl(311, 43%, 42%);

// good/bad, approval/disapproval, positive/negative
$color-positive: hsl(171, 44%, 44%);
$color-neutral: hsl(33, 91%, 50%);
$color-negative: hsl(7, 77%, 54%);
$color-no-data: $color-grey;

$color-chart-purple: hsl(267, 42%, 51%);
$color-chart-blue: hsl(200, 56%, 40%);
$color-chart-sea-green: hsl(170, 30%, 37%);

$color-men: hsl(171, 44%, 44%);
$color-women: hsl(46, 100%, 50%);

$color-national: hsl(171, 44%, 44%);
$color-state: hsl(7, 77%, 54%);

// The yiq lightness value that determines when the lightness of color changes
// from "dark" to "light". Acceptable values are between 0 and 255.
$yiq-contrasted-threshold: 150;

// Customize the light and dark text colors used in YIQ color contrast function.
$yiq-text-dark: $color-primary;
$yiq-text-light: $color-white;

// Typography
$font-size-base: 16;

$line-height-title: 1.2;
$line-height-subtitle: 1.3;
$line-height-body: 1.55;

$font-weight-light: 300;
$font-weight-normal: 400;
// none of our default fonts use these, but just in case you pull in some that
// do
// $font-weight-medium: 500;
// $font-weight-semibold: 600;
$font-weight-bold: 700;

$font-sans-serif: 'Open Sans', Helvetica, Arial, sans-serif;
$font-serif: 'PT Serif', Georgia, 'Times New Roman', Times, serif;

$color-text: $color-primary;
$color-text-inverse: $color-white;
$color-text-link: $color-tribune-light-blue;
$color-text-link-active: $color-tribune-blue;

$text-shadow-black: 0 0 2px rgba(0, 0, 0, 0.3), 0 0 2px rgba(0, 0, 0, 0.3);
$text-shadow-white: 0 0 2px rgba(255, 255, 255, 0.3),
  0 0 2px rgba(255, 255, 255, 0.3);

// Spacing
$gutter: 1.25rem;

$gutter-half: $gutter * 0.5;
$gutter-quarter: $gutter * 0.25;
$gutter-eighth: $gutter * 0.125;

$gutter-double: $gutter * 2;
$gutter-quad: $gutter * 4;
$gutter-octo: $gutter * 8;

// used to generate the helper sizing classes
$sizes: (
  25: 25%,
  50: 50%,
  75: 75%,
  100: 100%,
  auto: auto,
);

// Box shadows
$box-shadow-small: 0 0.125rem 0.25rem rgba($color-primary, 0.075);
$box-shadow: 0 0.5rem 1rem rgba($color-primary, 0.15);
$box-shadow-large: 0 1rem 3rem rgba($color-primary, 0.175);

// Animation curves

// best for elements moving on screen
$curve-standard: cubic-bezier(0.4, 0, 0.2, 1);
// best for elements leaving the screen
$curve-accelarate: cubic-bezier(0.4, 0, 1, 1);
// best for elements entering the screen
$curve-decelerate: cubic-bezier(0, 0, 0.2, 1);
// best for elements that may enter at any time (menus, etc.)
$curve-sharp: cubic-bezier(0.4, 0, 0.6, 1);

// Z-index master list
//
// Warning: Avoid customizing these values. They are designed to all work
// together.

$zindex-dropdown: 1000;
$zindex-sticky: 1020;
$zindex-fixed: 1030;
$zindex-modal-backdrop: 1040;
$zindex-modal: 1050;
$zindex-popover: 1060;
$zindex-tooltip: 1070;

// sass-mq
$mq-responsive: true;

// queso only - breakpoints
$bp-xs: 320px;
$bp-s: 520px;
$bp-m: 650px;
$bp-l: 845px;
$bp-xl: 1080px;
$bp-xxl: 1300px;

$bp-default: 960px;

$mq-breakpoints: (
  xs: 375px,
  s: 544px,
  m: 768px,
  l: 992px,
  xl: 1200px,
  header-break: 840px,
  footer-break: 850px,
  bp-xs: $bp-xs,
  bp-s: $bp-s,
  bp-m: $bp-m,
  bp-l: $bp-l,
  bp-xl: $bp-xl,
  bp-xxl: $bp-xxl,
  bp-default: $bp-default
);

$mq-media-type: screen;


// queso only - font base
$font-root: 16px;
$font-root-tablet: 16px;
$font-root-mobile: 16px;