// A base value used to responsively scale all typography, applied to the `<html>` element

@use "sass:math";

$font-size-root: 16px !default;

// Font face
// Based on https://material.google.com/style/typography.html#typography-typeface

// N.B. Although some values are not used in this project
// we leave them here just in case they may be required by your project

// stylelint-disable value-keyword-case
$font-family-monospace:  'Roboto Mono', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace !default;
$font-family-sans-serif: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !default;
$font-family-serif:      'Roboto Slab', Georgia, 'Times New Roman', Times, serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !default;
// stylelint-enable

$font-family-base:       $font-family-sans-serif !default;

$font-weight-medium:     500 !default;
$font-weight-regular:    400 !default;
$font-weight-light:      300 !default;

$font-weight-base:       $font-weight-regular !default;

// Font styles
// Based on https://material.google.com/style/typography.html#typography-styles

$font-size-base:            0.875rem !default;   // 14px

$font-size-display-4:       ($font-size-base * 8) !default;        // 112px
$font-size-display-3:       ($font-size-base * 4) !default;        // 56px
$font-size-display-2:       ($font-size-base * 2.4) !default;      //
$font-size-display-1:       ($font-size-base * 2.0) !default;      //
$font-size-headline:        ($font-size-base * 1.4) !default;      //
$font-size-title:           ($font-size-base * 1.285714) !default; // 18px
$font-size-subheading:      ($font-size-base * 1.142857) !default; // 16px
$font-size-body-2:          ($font-size-base * 1) !default;        // 14px
$font-size-body-1:          ($font-size-base * 1) !default;        // 14px
$font-size-caption:         ($font-size-base * 0.857143) !default; // 12px

$font-weight-display-4:     $font-weight-light !default;
$font-weight-display-3:     $font-weight-regular !default;
$font-weight-display-2:     $font-weight-regular !default;
$font-weight-display-1:     $font-weight-regular !default;
$font-weight-headline:      $font-weight-regular !default;
$font-weight-title:         $font-weight-medium !default;
$font-weight-subheading:    $font-weight-regular !default;
$font-weight-body-2:        $font-weight-medium !default;
$font-weight-body-1:        $font-weight-regular !default;
$font-weight-caption:       $font-weight-regular !default;

$letter-spacing-display-4:  -0.04em !default;
$letter-spacing-display-3:  -0.02em !default;
$letter-spacing-display-2:  0 !default;
$letter-spacing-display-1:  0 !default;
$letter-spacing-headline:   0 !default;
$letter-spacing-title:      0 !default;
$letter-spacing-subheading: 0 !default;
$letter-spacing-body-2:     0 !default;
$letter-spacing-body-1:     0 !default;
$letter-spacing-caption:    0 !default;

// Line height
// Based on https://material.google.com/style/typography.html#typography-line-height

$line-height-base:       1.428572 !default;

$line-height-display-4:  1 !default;        // 112px
$line-height-display-3:  1.035715 !default; // 58px
$line-height-display-2:  1.066667 !default; // 48px
$line-height-display-1:  1.176471 !default; // 40px
$line-height-headline:   1.333334 !default; // 32px
$line-height-title:      1.4 !default;      // 28px
$line-height-subheading: 1.5 !default;      // 24px
$line-height-body-2:     1.428572 !default; // 20px
$line-height-body-1:     1.428572 !default; // 20px
$line-height-caption:    1.5 !default;      // 18px

// Material icons default size

$material-icon-size: (math.div(24, strip-unit($font-size-root)) * 1rem) !default;
$material-icon-size-lg: ($material-icon-size * 1.5) !default;
$material-icon-size-sm: ($material-icon-size * .6) !default;
