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

$font-size-root: 16px;

// 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-sans-serif:      'Open Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
$font-family-monospace:       'Quicksand', Georgia, "Times New Roman", Times, serif;
$font-family-base:            $font-family-sans-serif;

// stylelint-enable

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

$font-size-base: 1rem; // 16px

$font-size-display-4: ($font-size-base * 4);
$font-size-display-3: ($font-size-base * 3);
$font-size-display-2: ($font-size-base * 2);
$font-size-display-1: ($font-size-base * 1.74);
$font-size-headline: ($font-size-base * 1.51);
$font-size-title: ($font-size-base * 1.32);

$font-size-caption: 1rem;
$font-size-auto: auto;

// Material icons default size

$material-icon-size: 1.71rem;

// $material-icon-size: (24 / strip-unit($font-size-root) * 1rem);

// Text Muted Opacity

$black-hint-opacity: 0.5;
$text-light: #babfc7;
