// Fonts

// Fonts
$font-stack: helvetica, arial, sans-serif;
$montserrat: "Montserrat", Helvetica, Arial, sans-serif;

//SR20 fonts
$font-black--sr18: "Founders-GroteskXCondensed-Bold", $font-stack;
$font-bold--sr18: "Founders-Grotesk-Semibold", $font-stack;
$font-regular--sr18: "Founders-Grotesk-Regular", $font-stack;

/* family=Montserrat:300,500,700,900
300 light
500 regular and medium, body-font
700 bold
900 black */

// Keep base font variables otherwise all components will need to be overriden with the new variables
$font-black-oblique: $font-black--sr18;
$font-black: $font-black--sr18;
$font-bold-oblique: $font-bold--sr18;
$font-bold: $font-bold--sr18;
$font-medium-oblique: $font-bold--sr18;
$font-medium: $font-bold--sr18;
$font-regular-oblique: $font-regular--sr18;
$font-regular: $font-regular--sr18;
$font-light-oblique: $font-regular--sr18;
$font-light: $font-regular--sr18;
$body-font:$font-regular--sr18;

// breakpoint: (font-size, line-height)
// $h1-black-font-size: (
//   null: (40px, 36px),
//   $screen-md: (64px, 54px),
//   $screen-lg: (70px, 60px)
// );
$h1-large-font-size: (
  null: (65px, 49px),
  $screen-md: (132px, 99px),
  $screen-lg: (167px, 125px)
);
$h1-font-size: (
  null: (58px, 43px),
  $screen-md: (92px, 69px),
  $screen-lg: (117px, 88px)
);
$h1-small-font-size: (
  null: (40px, 33px),
  $screen-md: (82px, 65px),
  $screen-lg: (82px, 65px)
);
$h2-font-size: (
  null: (28px, 31px),
  $screen-md: (32px, 35px),
  $screen-lg: (66px, 60px)
);
$h3-font-size: (
  null: (23px, 25px),
  $screen-md: (25px, 28px),
  $screen-lg: (38px, 41px)
);
$h4-font-size: (
  null: (18px, 20px),
  $screen-md: (20px, 22px),
  $screen-lg: (23px, 25px)
);
$h5-font-size: (
  null: (16px, 17px),
  $screen-md: (16px, 17px),
  $screen-lg: (18px, 20px)
);
$p-xxlarge-font-size: (
  null: (32px, 42px),
  $screen-md: (36px, 47px),
  $screen-lg: (36px, 47px)
);
$p-xlarge-font-size: (
  null: (25px, 33px),
  $screen-md: (28px, 37px),
  $screen-lg: (28px, 37px)
);
$p-large-font-size: (
  null: (23px, 29px),
  $screen-md: (23px, 29px),
  $screen-lg: (23px, 29px)
);
$p-font-size: (
  null: (20px, 26px),
  $screen-md: (20px, 26px),
  $screen-lg: (20px, 26px)
);
$p-small-font-size: (
  null: (18px, 23px),
  $screen-md: (18px, 23px),
  $screen-lg: (18px, 23px)
);
$p-xsmall-font-size: (
  null: (16px, 21px),
  $screen-md: (16px, 21px),
  $screen-lg: (16px, 21px)
);
$p-xxsmall-font-size: (
  null: (14px, 18px),
  $screen-md: (14px, 18px),
  $screen-lg: (14px, 18px)
);