// $type-scale: (
//   // 4: 2.074em,
//   3: 1.728em,
//   2: 1.44em,
//   1: 1.2em,
//   0: 1em,
//   -1: 0.833em,
//   // -2: 0.694em,
// );



// @function type-scale($level) {
//   @return map-get($type-scale, $level);
// }

// $base-font-size: 15px;
// $base-line-height: $base-font-size * 1.2;

// $line-heights: (
//   -1: $base-line-height,
//   0: $base-line-height,
//   1: $base-line-height * 2,
//   2: $base-line-height * 2
// );

// // Again, we can make a helper function:
// @function line-height($level) {
//   @return map-get($line-heights, $level);
// }

// @mixin type-setting($level: 0) {
//   font-size: type-scale($level);
//   line-height: line-height($level);
// }



// The main heading
// .heading-1 { @include type-setting(2); }

// // The smaller top heading
// .heading-2 { @include type-setting(-1); }

// .paragraph { @include type-setting(0); }

// .recipe-value { @include type-setting(1); }

// .recipe-text { @include type-setting(-1); }

// .recipe-button { @include type-setting(-1); }


// $type-scale: (
//   // 4: 2.074em,
//   3: 1.728em,
//   2: 1.44em,
//   1: 1.2em,
//   0: 1em,
//   -1: 0.833em,
//   // -2: 0.694em,
// );



// @function type-scale($level) {
//   @return map-get($type-scale, $level);
// }

// $base-font-size: 15px;
// $base-line-height: $base-font-size * 1.2;

// $line-heights: (
//   -1: $base-line-height,
//   0: $base-line-height,
//   1: $base-line-height * 2,
//   2: $base-line-height * 2
// );

// // Again, we can make a helper function:
// @function line-height($level) {
//   @return map-get($line-heights, $level);
// }

// @mixin type-setting($level: 0) {
//   font-size: type-scale($level);
//   line-height: line-height($level);
// }


// The main heading
.heading-1 { @include type-setting(2); }

// The smaller top heading
.heading-2 { @include type-setting(-1); }

.paragraph { @include type-setting(0); }

.recipe-value { @include type-setting(1); }

.recipe-text { @include type-setting(-1); }

.recipe-button { @include type-setting(-1); }