:root {
  --color-red-darkest: #7c0000;
  --color-red-darker: #a20000;
  --color-red-dark: #c70000;
  --color-red-medium: #d92b2b;
  --color-red-light: #f57a7a;
  --color-red-lighter: #ffc7c7;
  --color-red-lightest: #fff0f0;
  --color-orange-darkest: #992e00;
  --color-orange-darker: #bf4000;
  --color-orange-dark: #e05200;
  --color-orange-medium: #f60;
  --color-orange-light: #ff9751;
  --color-orange-lighter: #ffd1b2;
  --color-orange-lightest: #fff4ed;
  --color-yellow-darkest: #c29b00;
  --color-yellow-darker: #e5b700;
  --color-yellow-dark: #ffcf0f;
  --color-yellow-medium: #ffdb4d;
  --color-yellow-light: #ffeea8;
  --color-yellow-lighter: #fff6d4;
  --color-yellow-lightest: #fffbeb;
  --color-green-darkest: #11590d;
  --color-green-darker: #176b13;
  --color-green-dark: #22821d;
  --color-green-medium: #38a632;
  --color-green-light: #9ee69a;
  --color-green-lighter: #d0f2ce;
  --color-green-lightest: #f2fcf2;
  --color-blue-darkest: #014f70;
  --color-blue-darker: #015f87;
  --color-blue-dark: #0c7bab;
  --color-blue-medium: #059bd2;
  --color-blue-light: #9bddfa;
  --color-blue-lighter: #cfedfa;
  --color-blue-lightest: #f7fdff;
  --color-purple-darkest: #642374;
  --color-purple-darker: #7f3391;
  --color-purple-dark: #9f52b3;
  --color-purple-medium: #c274d6;
  --color-purple-light: #ebc1f5;
  --color-purple-lighter: #f2dcf7;
  --color-purple-lightest: #fcf2ff;
  --color-gray-darkest: #1a1a1a;
  --color-gray-darker: #444;
  --color-gray-dark: #6f6f6f;
  --color-gray-medium: #a2a2a2;
  --color-gray-light: #c4c4c4;
  --color-gray-lighter: #ddd;
  --color-gray-lightest: #fafafa;
  --color-white: #fff;
  --color-brand-orange: var(--color-orange-medium);
  --color-brand-blue: var(--color-blue-medium);
  --color-info: var(--color-blue-dark);
  --color-success: var(--color-green-medium);
  --color-warn: var(--color-yellow-darker);
  --color-error: var(--color-red-dark);
  --color-disabled: var(--color-gray-light);
  --color-link-active: var(--color-blue-dark);
  --color-link-hover: var(--color-blue-medium);
  --color-link-pressed: var(--color-blue-light);
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 18px;
  --font-size-lg: 24px;
  --font-size-xl: 30px;
  --font-size-xxl: 48px;
  --font-size-default: var(--font-size-sm);
  --font-size-label: var(--font-size-xs);
  --font-size-msg: var(--font-size-sm);
  --font-family-default: "Source Sans Pro", sans-serif;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --link-color: var(--color-blue-dark);
  /* prettier-ignore */
  --base-font-size: 16PX;
  --uppercase-letter-spacing: 2px;
  --line-height-xs: 20px;
  --line-height-sm: 24px;
  --line-height-md: 30px;
  --line-height-lg: 42px;
  --line-height-xl: 52px;
  --line-height-xxl: 82px;
  --line-height-default: var(--line-height-sm);
  --padding-xs: 6px;
  --padding-sm: 12px;
  --padding-md: 18px;
  --padding-lg: 24px;
  --padding-xl: 30px;
  --margin-xs: 6px;
  --margin-sm: 12px;
  --margin-md: 18px;
  --margin-lg: 24px;
  --margin-xl: 30px;
  --breakpoint-xs-min: 320px;
  --breakpoint-xs-max: 383px;
  --breakpoint-sm-min: 384px;
  --breakpoint-sm-max: 599px;
  --breakpoint-md-min: 600px;
  --breakpoint-md-max: 839px;
  --breakpoint-lg-min: 840px;
  --breakpoint-lg-max: 1259px;
  --breakpoint-xl-min: 1260px;
  --breakpoint-xl-max: 1600px;
  --gutter-width: 12px;
  --gutter-width-xs: 12px;
  --gutter-width-sm: 12px;
  --gutter-width-md: 12px;
  --gutter-width-lg: 24px;
  --gutter-width-xl: 30px;
  --gutter-x-width: var(--gutter-width);
  --gutter-x-width-xs: var(--gutter-width-xs);
  --gutter-x-width-sm: var(--gutter-width-sm);
  --gutter-x-width-md: var(--gutter-width-md);
  --gutter-x-width-lg: var(--gutter-width-lg);
  --gutter-x-width-xl: var(--gutter-width-xl);
  --gutter-y-width: var(--gutter-width);
  --gutter-y-width-xs: var(--gutter-width-xs);
  --gutter-y-width-sm: var(--gutter-width-sm);
  --gutter-y-width-md: var(--gutter-width-md);
  --gutter-y-width-lg: var(--gutter-width-lg);
  --gutter-y-width-xl: var(--gutter-width-xl);
  --table-cell-height: 30px;
  --table-cell-height-sm: 30px;
  --table-cell-height-md: 42px;
  --table-cell-height-lg: 54px;
  --container-x-padding-md: 12px;
  --container-x-padding-lg: 24px;
  --container-x-padding-xl: 30px;
  --container-y-padding-md: 0;
  --container-y-padding-lg: 0;
  --container-y-padding-xl: 0;
}