@use "functions/rem";

// ==========================================================================
// TYPOGRAPHY
// ==========================================================================

$normal: 400; // Change these values when using custom fonts
$bold: 700; // For example, bold could change to 400;

// Typefaces
$monospace: Monaco, Consolas, "courier new", "Andale Mono", monospace;
$serif: Georgia, "Times New Roman", Times, serif;
$sans: Helvetica, Arial, sans-serif;
$open-sans: "Open Sans", $sans; // 300 400 400i 600 700 700i 800
$merriweather: "Merriweather", $serif; // 900 700
$calluna: "calluna-1","calluna-2", Georgia, "Times New Roman", Times, serif;
$helvetica: "Helvetica Neue", $sans;
$helvetica-ultralight: HelveticaNeue-UltraLight, "Helvetica Neue UltraLight", "Helvetica Neue", $sans;
$helvetica-light: HelveticaNeue-Light, "Helvetica Neue Light", "Helvetica Neue", $sans;
$arial: Arial, Helvetica, Sans-serif;
$gill-sans: "Gill Sans", "Gill Sans MT", "Trebuchet MS", $sans;

// Icons
$genericons: "Genericons";
$dashicons: "dashicons";
$noticons: "Noticons";
$automatticons: "automatticons";

// NOTE:
// If there are exceptions to these stacks,
// please mark them with a //typography-exception comment
// so we can easily search for them later.

// Typography size variables

$font-headline-large: rem.convert(54px);
$font-headline-medium: rem.convert(48px);
$font-headline-small: rem.convert(36px);
$font-title-large: rem.convert(32px);
$font-title-medium: rem.convert(24px);
$font-title-small: rem.convert(20px);
$font-body: rem.convert(16px);
$font-body-small: rem.convert(14px);
$font-body-extra-small: rem.convert(12px);
$font-code: rem.convert(15px);
