// Font family settings
$font-paragraphs: 'Inter', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif;
$font-headings: 'Inter', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif;
$font-monospace: 'Inconsolata', 'Menlo', 'Monaco', 'Consolas', 'Andale Mono', 'Bitstream Vera Sans Mono', 'Courier New', monospace;

// Font size settings
$font-size-min: 17px;
$font-size-max: 20px;
$font-size-max-blog: 19px;
$font-size-min-h1: 32px;
$font-size-max-h1: 51px;
$font-size-min-h2: 24px;
$font-size-max-h2: 38px;
$font-size-min-h3: 21px;
$font-size-max-h3: 28px;
$font-size-min-h4: 18px;
$font-size-max-h4: 21px;
$font-size-min-h5: 14px;
$font-size-max-h5: 17px;
$font-size-min-h6: 12px;
$font-size-max-h6: 14px;

// CSS Variables for responsive fonts
:root {
  --font-size-default: #{$font-size-max};
  --font-size-tiny: 14px;
  --font-size-small: 16px;
  --font-size-medium: 17px;
  --font-size-large: 18px;
  --font-size-extra-large: 20px;
  --font-size-huge: 22px;
  --font-size-nav-toggle-label: 15px;
  --font-size-captions: 15px;

  // Line-heights
  --line-height-headings: 1.5;
  --line-height-core-heading: 1.23;
  --line-height-paragraphs: 1.7;
  --line-height-paragraphs-blog: 1.77;

  // Font weights
  --font-weight-paragraphs: 400;
  --font-weight-headings: 700;

  // Vars on iPad
  @media (max-width: $container-ipad) {
    --font-size-extra-large: 17px;
  }

  // Vars in mobile
  @media (max-width: $container-mobile) {
    --font-size-tiny: 16px;
    --font-size-small: 16px;
    --font-size-default: 16px;
  }

  // Vars in tiny phones like iPhone 5S
  @media (max-width: 420px) {
    --font-size-nav-toggle-label: 13px;
    --font-size-extra-large: 16px;
    --font-size-tiny: 14px;
    --font-size-small: 14px;
  }
}