//== Typography // //## Font, line-height, and color for body text, headings, and more. // Global text color on ``. $text-color: ui-color(u-darkest-gray) !default; $text-color-inverse: ui-color(u-white) !default; // For text on a dark background $text-muted-opacity: 0.7 !default; // Font Fallbacks $proxima-font-fallbacks: Avenir Next, Avenir, Century Gothic, Helvetica Neue, Arial, sans-serif !default; $circular-font-fallbacks: Avenir Next, Avenir, Century Gothic, sans-serif !default; //** Default monospace fonts for `

`, ``, and ``.
$font-family-monospace:       PT Mono,
                              Source Code Pro,
                              Menlo,
                              Monaco,
                              Consolas,
                              Courier New,
                              monospace !default;



// Font Sizes
//
// Defined in rems to aide accessibility and scalability. We've adjusted the
// font-scale so 1rem ≈ 1px. A rem can vary in size however depending on the
// user's font sizing preferences, which we intentionally support.
//
// See http://css-tricks.com/rems-ems/

// Line Height
//
// Each line height is defined in rems and also a ratio.
//
// The ratio is unitless, and used when setting the line-height property,
// e.g. line-height: $line-height-base-ratio.
//
// The rem version is used for other properties, like margin and padding
// e.g. margin-bottom: $line-height-base

$font-size-large:             rem(20px) !default;
$line-height-large:           rem(28px) !default;
$line-height-large-ratio:     $line-height-large / $font-size-large !default;

$font-size-base:              rem(16px) !default;
$line-height-base:            rem(24px) !default;
$line-height-base-ratio:      $line-height-base / $font-size-base !default;

$font-size-small:             rem(14px) !default;
$line-height-small:           rem(22px) !default;
$line-height-small-ratio:     $line-height-small / $font-size-small !default;

$font-size-xs:                rem(12px) !default;
$line-height-xs:              rem(20px) !default;
$line-height-xs-ratio:        $line-height-xs / $font-size-xs !default;

// For tightening lines of text, like link lists
$line-height-tight-ratio:     1.2 !default;



// Define the point at which the browser will decrease the font scale
// DEPRECATED: Remove in ≥ 0.23.0
$font-size-breakpoint:        0 !default;



// Font Weights
// Utility variables for easier readability

$font-weight-black:           900;
$font-weight-extra-bold:      800;
$font-weight-bold:            700;
$font-weight-semi-bold:       600;
$font-weight-medium:          500;
$font-weight-normal:          400;
$font-weight-light:           300;
$font-weight-extra-light:     200;
$font-weight-thin:            100;

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



// Headings

$headings-font-weight:        $font-weight-bold !default;
$headings-color:              inherit !default;

$hero-heading-font-size:              rem(48px) !default;
$hero-heading-line-height-ratio:      rem(56px) / $hero-heading-font-size !default;
$hero-heading-font-size-xs:           rem(28px) !default;
$hero-heading-line-height-ratio-xs:   rem(36px) / $hero-heading-font-size-xs !default;
$hero-heading-font-weight:            $headings-font-weight !default;

$hero-text-font-size:                 rem(20px) !default;
$hero-text-line-height-ratio:         rem(28px) / $hero-text-font-size !default;
$hero-text-font-size-xs:              rem(18px) !default;
$hero-text-line-height-ratio-xs:      rem(26px) / $hero-text-font-size-xs !default;

$h1-font-size:                rem(28px) !default;
$h1-line-height-ratio:        rem(36px) / $h1-font-size !default;
$h1-font-size-xs:             rem(22px) !default;
$h1-line-height-ratio-xs:     rem(30px) / $h1-font-size-xs !default;
$h1-font-weight:              $font-weight-medium !default;

$h2-font-size:                rem(20px) !default;
$h2-line-height-ratio:        rem(28px) / $h2-font-size !default;
$h2-font-size-xs:             rem(18px) !default;
$h2-line-height-ratio-xs:     rem(26px) / $h2-font-size-xs !default;
$h2-font-weight:              $headings-font-weight !default;

$h3-font-size:                rem(16px) !default;
$h3-line-height-ratio:        rem(24px) / $h3-font-size !default;
$h3-font-size-xs:             rem(16px) !default;
$h3-line-height-ratio-xs:     rem(24px) / $h3-font-size-xs !default;
$h3-font-weight:              $headings-font-weight !default;

$h4-font-size:                $font-size-base !default;
$h4-line-height-ratio:        $line-height-base-ratio !default;

$h5-font-size:                $h4-font-size !default;
$h5-line-height-ratio:        $h4-line-height-ratio !default;

$h6-font-size:                $h4-font-size !default;
$h6-line-height-ratio:        $h4-line-height-ratio !default;


//  background color
$mark-bg:                     #F5FC44 !default;

// Abbreviations and acronyms
$abbr-border-color:           ui-color(u-light-gray) !default;


// Page header
$page-header-border-color:    ui-color(u-lighter-gray) !default;