// ============================================================================
// :: Typography
// ============================================================================
/**
 * This file contains all the settings concerning the base typography of the
 * project. These stylings should NOT be used to define the typography of a
 * standalone component, but should provide a standard way to style the
 * typography.
 *
 * When defining these levels, you should opt to stay within the
 * large - base and small values, using 1x, 2x, ... to indicate a multiplier,
 * but if this is not possible you can define these size levels in chronological
 * order.
 */

// ============================================================================
// :: Font families
// ============================================================================

@include get-font("icons", "/assets/fonts/icons/icons");
@include get-font("Roboto", "/assets/fonts/roboto/Roboto-Light", 300);
@include get-font("Roboto", "/assets/fonts/roboto/Roboto-Regular", 400);
@include get-font("Roboto", "/assets/fonts/roboto/Roboto-Medium", 500);
@include get-font("Roboto", "/assets/fonts/roboto/Roboto-Bold", 700);
// @include get-font("Beausans", "/assets/fonts/beausans/beausans-thin", 100);
// @include get-font("Beausans", "/assets/fonts/beausans/beausans-book", 200);
// @include get-font("Beausans", "/assets/fonts/beausans/beausans-regular", 400);
// @include get-font("Beausans", "/assets/fonts/beausans/beausans-semibold", 600);
// @include get-font("Beausans", "/assets/fonts/beausans/beausans-bold", 700);
// @include get-font("Baloo", "/assets/fonts/beausans/beausans-thin", 100);
// @include get-font("Baloo", "/assets/fonts/beausans/beausans-book", 200);
@include get-font("Baloo", "/assets/fonts/baloo/Baloo2-Regular", 400);
@include get-font("Baloo", "/assets/fonts/baloo/Baloo2-SemiBold", 600);
@include get-font("Baloo", "/assets/fonts/baloo/Baloo2-Bold", 700);

// set
$font-family-roboto: "Roboto", "arial", sans-serif;

// $font-family-beausans: "Beausans", "arial", sans-serif;

// Replaced the beausans-variable with the new font. So i dont have to do a full codebase refactor.
$font-family-beausans: "Baloo", "arial", sans-serif;

// ============================================================================
// :: Font sizes
// ============================================================================
$font-size-5x-large: 5.6rem; //56px h1
$font-size-4x-large: 4.2rem; //42px h2
$font-size-3x-large: 2.8rem; //28px h3
$font-size-2x-large: 2.1rem; //21px h4
$font-size-1x-large: 1.7rem; //17px h5
$font-size: 1.6rem; //16px link
$font-size-1x-small: 1.4rem; //14pxh6, p on mobile
$font-size-2x-small: 1.2rem; //12px label
$font-size-3x-small: 1rem; //10px label mobile

// ============================================================================
// :: Line heights
// ============================================================================
$line-height-6x-large: 6.6rem; //h1
$line-height-5x-large: 5.2rem; //h2
$line-height-4x-large: 3.8rem; //h3
$line-height-3x-large: 3.1rem; //h4
$line-height-2x-large: 2.4rem; //h5, p
$line-height-1x-large: 2.1rem; //p mobile
$line-height: 1.6rem; //small
$line-height-normalize: 1rem; //normalize

// ============================================================================
// :: Font weights
// ============================================================================
$font-weight-bold: 700;
$font-weight-semibold: 600;
$font-weight-medium: 500;
$font-weight-normal: 400;
$font-weight-lite: 300;
$font-weight-thin: 200;
$font-weight-ultrathin: 100;