// ####################################################
// Load fonts
//
// Use below @font-face declaration template to load fonts
// Copy/paste for each font to be loaded

/*
@font-face {
  font-family: Graphik;
  src: url('/app/themes/wyss-institute/assets/fonts/Graphik-Bold-Web.eot');
  src: url('/app/themes/wyss-institute/assets/fonts/Graphik-Bold-Web.eot?#iefix') format('embedded-opentype'),
       url('/app/themes/wyss-institute/assets/fonts/Graphik-Bold-Web.woff2') format('woff2'),
       url('/app/themes/wyss-institute/assets/fonts/Graphik-Bold-Web.woff') format('woff');
}
*/

// ####################################################
// Site font stack variables
//
// uncomment and complete stack with project fonts
// xxxxx--loaded variables need a font loader to be activated (see setup/mixins/typography for CSS rule) :
// https://code.area17.com/mike/a17-js-helpers/wikis/A17-Helpers-fontObservers

// set to 100% to use the browsers font size as a base
$global-font-size: 100% !default;

// the fall back font family string. eg. Helvetica, Arial, sans-serif.
$serif-font: serif;
$sans-serif-font: sans-serif;
// the font family string when the primary font is loaded (your primary font plus the fall back string)
$serif-font--loaded: Georgia, #{$serif-font};
$sans-serif-font--loaded: Arial, #{$sans-serif-font};
// the appended class names when the fonts have loaded
$serif-font-loaded-class: "js-serif-font-loaded";
$sans-serif-font-loaded-class: "js-sans-serif-font-loaded";

// ####################################################
// Site fonts objects, mixins, placeholders and classes

// BASE FONTS SCALE
// ----------------------------------------------------
// Create a 'base' file for each font family, weight and style.
// The base styles should include a variable of all of the font styles for a single breakpoint
//
// For example:
/*
$georgia-400-1: (
  font-size: 10,
  line-height: 1.2,
  font-weight: 400,
  letter-spacing: 0.01em
);

$georgia-400-2: (
 font-size: 11,
 line-height: 1.2,
 font-weight: 400,
 letter-spacing: 0.01em
);
*/

// @import 'typography/base/georgia--400';

// ----------------------------------------------------
// RESPONSIVE FONT GROUPS
// ----------------------------------------------------
// Create a file for each responsive typo style.
//
// Sample block below. Copy, paste and edit for each type
// style you need. Use the variables defined in the base styles above
//
// `xsmall` is basically the default
// Attributes in the settings are additive, that is, if
// you set something, font-weight, in xsmall, it value
// will be carried through all breakpoints, unless you
// supply a new font-weight in a later breakpoint (in
// which case that new value becomes the value for all
// later breakpoints).
//
// You always need to set a `xsmall`.

/*
$f-XX: generate-font-obj(
  (
    font-family: $serif-font,
    font-family-loaded: $serif-font--loaded,
    font-loaded-class: $serif-font-loaded-class,
    settings: (
      'xsmall': $georgia--400-1,
      'medium+': $georgia--400-2,
      'xlarge+': $georgia--400-3,
      'xxlarge': $georgia--400-4
    )
  )
);

@mixin f-XX() {
  @include font-styles($f-XX);
  font-variant-ligatures: common-ligatures;
  font-variant-numeric: oldstyle-nums;
  font-kerning: normal;
}

%f-XX,
.f-XX {
  @include f-XX;
}
*/

// @import 'typography/body';