/*
    This file was auto-generated by InVision DSM from the FreshBooks (Web) design library. 
    To keep style values in sync across teams, changes to this file should be made directly from DSM.

*/

:root {
  /*
    Colors:
*/

  --color-fresh-red: #fa405c;
  --color-foreground-color: #062942;
  --color-white: #fbfdfe;
  --color-fresh-yellow: #edc02b;
  --color-freshbooks-light-grey: #cdd4d9;
  --color-fresh-grey: #8495a2;
  --color-freshbooks-green: #85c525;
  --color-freshbooks-blue: #0d83dd;
  --color-background-color: #ffffff;
  --color-fresh-green: #85c525;
  --color-fresh-blue: #0d83dd;
  --color-fresh-yellow: #edc02b;
  --color-fresh-red: #fa405c;
  --color-fresh-grey: #8495a2;
  --color-foreground-color: #062942;
  --color-background-color: #fbfdfe;

  /*
    Font Styles:
*/

  /* Page-filter font style */
  --font-page-filter-font-size: 64px;
  --font-page-filter-line-height: normal;
  --font-page-filter-text-align: center;
  --font-page-filter-color: #0d83dd;
  --font-page-filter-font-style: normal;
  --font-page-filter-font-weight: 300;
  --font-page-filter-font-family: FranklinGothic URW;

  --font-page-filter: {
    font-size: var(--font-page-filter-font-size);
    line-height: var(--font-page-filter-line-height);
    text-align: var(--font-page-filter-text-align);
    color: var(--font-page-filter-color);
    font-style: var(--font-page-filter-font-style);
    font-weight: var(--font-page-filter-font-weight);
    font-family: var(--font-page-filter-font-family);
  };

  /* Heading 1 font style */
  --font-heading-1-font-size: 36px;
  --font-heading-1-line-height: 48px;
  --font-heading-1-text-align: left;
  --font-heading-1-color: #062942;
  --font-heading-1-font-style: normal;
  --font-heading-1-font-weight: 300;
  --font-heading-1-font-family: FranklinGothic URW;

  --font-heading-1: {
    font-size: var(--font-heading-1-font-size);
    line-height: var(--font-heading-1-line-height);
    text-align: var(--font-heading-1-text-align);
    color: var(--font-heading-1-color);
    font-style: var(--font-heading-1-font-style);
    font-weight: var(--font-heading-1-font-weight);
    font-family: var(--font-heading-1-font-family);
  };

  /* Heading 2 font style */
  --font-heading-2-font-size: 24px;
  --font-heading-2-line-height: 32px;
  --font-heading-2-text-align: left;
  --font-heading-2-color: #062942;
  --font-heading-2-font-style: normal;
  --font-heading-2-font-weight: 300;
  --font-heading-2-font-family: FranklinGothic URW;

  --font-heading-2: {
    font-size: var(--font-heading-2-font-size);
    line-height: var(--font-heading-2-line-height);
    text-align: var(--font-heading-2-text-align);
    color: var(--font-heading-2-color);
    font-style: var(--font-heading-2-font-style);
    font-weight: var(--font-heading-2-font-weight);
    font-family: var(--font-heading-2-font-family);
  };

  /* Heading 3 font style */
  --font-heading-3-font-size: 18px;
  --font-heading-3-line-height: 24px;
  --font-heading-3-text-align: left;
  --font-heading-3-color: #062942;
  --font-heading-3-font-style: normal;
  --font-heading-3-font-weight: 300;
  --font-heading-3-font-family: FranklinGothic URW;

  --font-heading-3: {
    font-size: var(--font-heading-3-font-size);
    line-height: var(--font-heading-3-line-height);
    text-align: var(--font-heading-3-text-align);
    color: var(--font-heading-3-color);
    font-style: var(--font-heading-3-font-style);
    font-weight: var(--font-heading-3-font-weight);
    font-family: var(--font-heading-3-font-family);
  };

  /* Heading 4 font style */
  --font-heading-4-font-size: 14px;
  --font-heading-4-line-height: 18px;
  --font-heading-4-text-align: left;
  --font-heading-4-font-style: normal;
  --font-heading-4-font-weight: 300;
  --font-heading-4-font-family: FranklinGothic URW;

  --font-heading-4: {
    font-size: var(--font-heading-4-font-size);
    line-height: var(--font-heading-4-line-height);
    text-align: var(--font-heading-4-text-align);
    font-style: var(--font-heading-4-font-style);
    font-weight: var(--font-heading-4-font-weight);
    font-family: var(--font-heading-4-font-family);
  };

  /* Body Copy font style */
  --font-body-copy-font-size: 18px;
  --font-body-copy-line-height: 24px;
  --font-body-copy-text-align: left;
  --font-body-copy-color: #062942;
  --font-body-copy-font-style: normal;
  --font-body-copy-font-weight: 300;
  --font-body-copy-font-family: FranklinGothic URW;

  --font-body-copy: {
    font-size: var(--font-body-copy-font-size);
    line-height: var(--font-body-copy-line-height);
    text-align: var(--font-body-copy-text-align);
    color: var(--font-body-copy-color);
    font-style: var(--font-body-copy-font-style);
    font-weight: var(--font-body-copy-font-weight);
    font-family: var(--font-body-copy-font-family);
  };

  /* ghost-button-text font style */
  --font-ghost-button-text-font-size: 17.99999999999999px;
  --font-ghost-button-text-line-height: 18px;
  --font-ghost-button-text-text-align: start;
  --font-ghost-button-text-font-style: normal;
  --font-ghost-button-text-font-weight: 300;
  --font-ghost-button-text-font-family: FranklinGothic URW;

  --font-ghost-button-text: {
    font-size: var(--font-ghost-button-text-font-size);
    line-height: var(--font-ghost-button-text-line-height);
    text-align: var(--font-ghost-button-text-text-align);
    font-style: var(--font-ghost-button-text-font-style);
    font-weight: var(--font-ghost-button-text-font-weight);
    font-family: var(--font-ghost-button-text-font-family);
  };

  /* Button font style */
  --font-button-font-size: 17.99999999999999px;
  --font-button-line-height: 18px;
  --font-button-text-align: center;
  --font-button-color: #ffffff;
  --font-button-font-style: normal;
  --font-button-font-weight: 300;
  --font-button-font-family: FranklinGothic URW;

  --font-button: {
    font-size: var(--font-button-font-size);
    line-height: var(--font-button-line-height);
    text-align: var(--font-button-text-align);
    color: var(--font-button-color);
    font-style: var(--font-button-font-style);
    font-weight: var(--font-button-font-weight);
    font-family: var(--font-button-font-family);
  };

  /* group_description font style */
  --font-group-description-font-size: 14px;
  --font-group-description-line-height: normal;
  --font-group-description-text-align: left;
  --font-group-description-font-style: normal;
  --font-group-description-font-weight: 300;
  --font-group-description-font-family: FranklinGothic URW;

  --font-group-description: {
    font-size: var(--font-group-description-font-size);
    line-height: var(--font-group-description-line-height);
    text-align: var(--font-group-description-text-align);
    font-style: var(--font-group-description-font-style);
    font-weight: var(--font-group-description-font-weight);
    font-family: var(--font-group-description-font-family);
  };

  /* Placeholder Text font style */
  --font-placeholder-text-font-size: 18px;
  --font-placeholder-text-line-height: 24px;
  --font-placeholder-text-text-align: left;
  --font-placeholder-text-color: #062942;
  --font-placeholder-text-font-style: normal;
  --font-placeholder-text-font-weight: 300;
  --font-placeholder-text-font-family: FranklinGothic URW;

  --font-placeholder-text: {
    font-size: var(--font-placeholder-text-font-size);
    line-height: var(--font-placeholder-text-line-height);
    text-align: var(--font-placeholder-text-text-align);
    color: var(--font-placeholder-text-color);
    font-style: var(--font-placeholder-text-font-style);
    font-weight: var(--font-placeholder-text-font-weight);
    font-family: var(--font-placeholder-text-font-family);
  };

  /* SECTION LABEL font style */
  --font-section-label-font-size: 14px;
  --font-section-label-line-height: 18px;
  --font-section-label-text-align: left;
  --font-section-label-color: #062942;
  --font-section-label-font-style: normal;
  --font-section-label-font-weight: 300;
  --font-section-label-font-family: FranklinGothic URW;

  --font-section-label: {
    font-size: var(--font-section-label-font-size);
    line-height: var(--font-section-label-line-height);
    text-align: var(--font-section-label-text-align);
    color: var(--font-section-label-color);
    font-style: var(--font-section-label-font-style);
    font-weight: var(--font-section-label-font-weight);
    font-family: var(--font-section-label-font-family);
  };

  /* Modal Heading font style */
  --font-modal-heading-font-size: 30px;
  --font-modal-heading-line-height: 36px;
  --font-modal-heading-text-align: center;
  --font-modal-heading-color: #0d83dd;
  --font-modal-heading-font-style: normal;
  --font-modal-heading-font-weight: 300;
  --font-modal-heading-font-family: FranklinGothic URW;

  --font-modal-heading: {
    font-size: var(--font-modal-heading-font-size);
    line-height: var(--font-modal-heading-line-height);
    text-align: var(--font-modal-heading-text-align);
    color: var(--font-modal-heading-color);
    font-style: var(--font-modal-heading-font-style);
    font-weight: var(--font-modal-heading-font-weight);
    font-family: var(--font-modal-heading-font-family);
  };

  /* Modal Body - Centered font style */
  --font-modal-body-centered-font-size: 18px;
  --font-modal-body-centered-line-height: 24px;
  --font-modal-body-centered-text-align: center;
  --font-modal-body-centered-color: #062942;
  --font-modal-body-centered-font-style: normal;
  --font-modal-body-centered-font-weight: 300;
  --font-modal-body-centered-font-family: FranklinGothic URW;

  --font-modal-body-centered: {
    font-size: var(--font-modal-body-centered-font-size);
    line-height: var(--font-modal-body-centered-line-height);
    text-align: var(--font-modal-body-centered-text-align);
    color: var(--font-modal-body-centered-color);
    font-style: var(--font-modal-body-centered-font-style);
    font-weight: var(--font-modal-body-centered-font-weight);
    font-family: var(--font-modal-body-centered-font-family);
  };

  /* Modal Link - Centered font style */
  --font-modal-link-centered-font-size: 14px;
  --font-modal-link-centered-line-height: 18px;
  --font-modal-link-centered-text-align: center;
  --font-modal-link-centered-color: #0d83dd;
  --font-modal-link-centered-font-style: normal;
  --font-modal-link-centered-font-weight: 300;
  --font-modal-link-centered-font-family: FranklinGothic URW;

  --font-modal-link-centered: {
    font-size: var(--font-modal-link-centered-font-size);
    line-height: var(--font-modal-link-centered-line-height);
    text-align: var(--font-modal-link-centered-text-align);
    color: var(--font-modal-link-centered-color);
    font-style: var(--font-modal-link-centered-font-style);
    font-weight: var(--font-modal-link-centered-font-weight);
    font-family: var(--font-modal-link-centered-font-family);
  };

  /* Body Copy - Centered font style */
  --font-body-copy-centered-font-size: 18px;
  --font-body-copy-centered-line-height: 24px;
  --font-body-copy-centered-text-align: center;
  --font-body-copy-centered-color: #062942;
  --font-body-copy-centered-font-style: normal;
  --font-body-copy-centered-font-weight: 300;
  --font-body-copy-centered-font-family: FranklinGothic URW;

  --font-body-copy-centered: {
    font-size: var(--font-body-copy-centered-font-size);
    line-height: var(--font-body-copy-centered-line-height);
    text-align: var(--font-body-copy-centered-text-align);
    color: var(--font-body-copy-centered-color);
    font-style: var(--font-body-copy-centered-font-style);
    font-weight: var(--font-body-copy-centered-font-weight);
    font-family: var(--font-body-copy-centered-font-family);
  };

  /* Sketchy type font style */
  --font-sketchy-type-font-size: 24px;
  --font-sketchy-type-line-height: 24px;
  --font-sketchy-type-text-align: left;
  --font-sketchy-type-color: #0d83dd;
  --font-sketchy-type-font-style: normal;
  --font-sketchy-type-font-weight: 400;
  --font-sketchy-type-font-family: FreshBooks Script;

  --font-sketchy-type: {
    font-size: var(--font-sketchy-type-font-size);
    line-height: var(--font-sketchy-type-line-height);
    text-align: var(--font-sketchy-type-text-align);
    color: var(--font-sketchy-type-color);
    font-style: var(--font-sketchy-type-font-style);
    font-weight: var(--font-sketchy-type-font-weight);
    font-family: var(--font-sketchy-type-font-family);
  };

  /* FORM LABEL font style */
  --font-form-label-font-size: 14px;
  --font-form-label-line-height: 18px;
  --font-form-label-text-align: left;
  --font-form-label-color: #8495a2;
  --font-form-label-text-transform: uppercase;
  --font-form-label-font-style: normal;
  --font-form-label-font-weight: 300;
  --font-form-label-font-family: FranklinGothic URW;

  --font-form-label: {
    font-size: var(--font-form-label-font-size);
    line-height: var(--font-form-label-line-height);
    text-align: var(--font-form-label-text-align);
    color: var(--font-form-label-color);
    text-transform: var(--font-form-label-text-transform);
    font-style: var(--font-form-label-font-style);
    font-weight: var(--font-form-label-font-weight);
    font-family: var(--font-form-label-font-family);
  };
}