@import 'variable.scss';

/* ==========================================================================
 * File Name:         Font
 * Description:       List of all scaled font sizes and relevant spacing
 *
 * Fonts are set using a responsive typescale that sets font sizes along a
   specified ratio. You can change the size of your fonts by changing the
   multiplier map in variables.scss, by setting your own ratio as a new map key,
   or by changing the base-font CSS variable below.
 *
 * For information about type scaling, read the link below:
   https://medium.com/sketch-app-sources/exploring-responsive-type-scales-cf1da541be54
 *
============================================================================= */

//General Font Style - Fonts and Weights
h1, h2, h3 {
  font-family: $primary-font;
  font-weight: $font-regular;
  text-align: left;
}

h4, h5, h6 {
    font-family: $secondary-font;
    font-weight: $font-light;
    text-align: left;
}

p {
  font-family: $terciary-font;
  font-weight: $font-light;
  text-align: left;
}

a {
  font-family: $primary-font;
  font-weight: $font-light;
  color: map-get($accent, kale);
}

.Italic-heading-font {
  font-family: $primary-font;
  font-style: italic;
  font-weight: $font-regular;
}

.Italic-subtitle-font{
  font-family: $secondary-font;
  font-style: italic;
  font-weight: $font-light;
}

.Italic-body-font{
    font-family: $terciary-font;
    font-style: italic;
    font-weight: $font-light;
}

.strong {
  font-weight: $font-bold;
  color: map-get($accent, beet);
}

/* ============================================================================
    Font Sizing
 * ============================================================================ */

// Font sizing for laptop: (Breakpoint: 990px, base font size: 16px, typography scale: 1.200 minor third)
h6 { 
    font-size: $base-font-size;
}
h5 {
    font-size: calc($base-font-size * map-get($multipliers, minor-third));
}
h4 {
    font-size: calc($base-font-size * map-get($multipliers, minor-third) * map-get($multipliers, minor-third));
}
h3 {
    font-size: calc($base-font-size * map-get($multipliers, minor-third) * map-get($multipliers, minor-third) * map-get($multipliers, minor-third));
}
h2 {
    font-size: calc($base-font-size * map-get($multipliers, minor-third) * map-get($multipliers, minor-third) * map-get($multipliers, minor-third) * map-get($multipliers, minor-third));
}
h1 {
    font-size: calc($base-font-size * map-get($multipliers, minor-third) * map-get($multipliers, minor-third) * map-get($multipliers, minor-third) * map-get($multipliers, minor-third) * map-get($multipliers, minor-third));
}
p {
    font-size: calc($base-font-size / map-get($multipliers, minor-third));
}
a {
    font-size: calc($base-font-size / map-get($multipliers, minor-third)); 
}

//  Media Query Font Size: Change multiplier (typography scale) and base font size values accordinly for tablet and phone breakpoint.

// Font sizing for tablet: (Breakpoint: 750px, base font size: 16px, typography scale: 1.125 major second)

@media (max-width: map-get($breakpoints, md)) {
    h6 { 
        font-size: $base-font-size;
    }
    h5 {
        font-size: calc($base-font-size * map-get($multipliers, major-second));
    }
    h4 {
        font-size: calc($base-font-size * map-get($multipliers, major-second) * map-get($multipliers, major-second));
    }
    h3 {
        font-size: calc($base-font-size * map-get($multipliers, major-second) * map-get($multipliers, major-second) * map-get($multipliers, major-second));
    }
    h2 {
        font-size: calc($base-font-size * map-get($multipliers, major-second) * map-get($multipliers, major-second) * map-get($multipliers, major-second) * map-get($multipliers, major-second));
    }
    h1 {
        font-size: calc($base-font-size * map-get($multipliers, major-second) * map-get($multipliers, major-second) * map-get($multipliers, major-second) * map-get($multipliers, major-second) * map-get($multipliers, major-second));
    }
    p {
        font-size: calc($base-font-size / map-get($multipliers, major-second));
    }
    a {
        font-size: calc($base-font-size / map-get($multipliers, major-second)); 
    }

};

// Font sizing for phone: (Breakpoint: 550px, base font size: 14px, typography scale: 1.125 major second)

@media (max-width: map-get($breakpoints, sm)) {
    h6 { 
        font-size: $mobile-base-font-size;
    }
    h5 {
        font-size: calc($mobile-base-font-size * map-get($multipliers, major-second));
    }
    h4 {
        font-size: calc($mobile-base-font-size * map-get($multipliers, major-second) * map-get($multipliers, major-second));
    }
    h3 {
        font-size: calc($mobile-base-font-size * map-get($multipliers, major-second) * map-get($multipliers, major-second) * map-get($multipliers, major-second));
    }
    h2 {
        font-size: calc($mobile-base-font-size * map-get($multipliers, major-second) * map-get($multipliers, major-second) * map-get($multipliers, major-second) * map-get($multipliers, major-second));
    }
    h1 {
        font-size: calc($mobile-base-font-size * map-get($multipliers, major-second) * map-get($multipliers, major-second) * map-get($multipliers, major-second) * map-get($multipliers, major-second) * map-get($multipliers, major-second));
    }
    p {
        font-size: calc($mobile-base-font-size / map-get($multipliers, major-second));
    }
    a {
        font-size: calc($mobile-base-font-size / map-get($multipliers, major-second)); 
    }

};

/* ============================================================================
    Font Spacing
 * ============================================================================ */

 /* Line Height */

body * {
  line-height: $base-line-height;
}

/* Font Bottom Margins
 */

p {
  margin: 0 0 $margin-m 0;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: $padding-m 0;
}

.large-line-height {line-height: $large-line-height;}
.small-line-height {line-height: calc(#{$general-line-height} - 0.2rem) !important;}


/* ==========================================================================
 *
 * FONT COLOURS
 * Default font colours for general HTML text elements
 *
 *
============================================================================= */


$h1-font-color: map-get($accent, beet);
$body-font-color: $dark;
$link-font-color: map-get($accent, kale);
$hero-font-color: $mute;

h1 {color: $h1-font-color}
body, h2, h3, h4, h5, h6 {color: $body-font-color}