/*╔══════════════════════════════════════════════════╗
  ║                        Typography                         ║
  ╚══════════════════════════════════════════════════╝*/

$font-primary: "Karla", $font-family-sans-serif;
$font-secondary: "Lora", serif;
$font-weight: 300;

:root {
  /* base values */
  --text-base-size: 1em;
  --text-scale-ratio: 1.2;

  /* type scale */
  --text-xs: calc(1em / (var(--text-scale-ratio) * var(--text-scale-ratio)));
  --text-sm: calc(1em / var(--text-scale-ratio));
  --text-md: calc(1em * var(--text-scale-ratio));
  --text-lg: calc(1em * var(--text-scale-ratio) * var(--text-scale-ratio));
  --text-xl: calc(
    1em * var(--text-scale-ratio) * var(--text-scale-ratio) *
      var(--text-scale-ratio)
  );
  --text-xxl: calc(
    1em * var(--text-scale-ratio) * var(--text-scale-ratio) *
      var(--text-scale-ratio) * var(--text-scale-ratio)
  );
  --text-xxxl: calc(
    1em * var(--text-scale-ratio) * var(--text-scale-ratio) *
      var(--text-scale-ratio) * var(--text-scale-ratio) *
      var(--text-scale-ratio)
  );

  /* line-height */
  --heading-line-height: 1.2;
  --body-line-height: 1.5;
}

@include media-breakpoint-down(md) {
  :root {
    --text-base-size: 0.8em;
  }
}