/**
 * Fonts and Icon Fonts
 * ====================
 * We're going to use style linking for font-faces, as per
 * https://www.smashingmagazine.com/2013/02/setting-weights-and-styles-at-font-face-declaration/#style-linking
 * It may eventually be necessary to switch to using unique family names as per
 * https://www.smashingmagazine.com/2013/02/setting-weights-and-styles-at-font-face-declaration/#unique-font-family-names-matching-weights-and-styles
 * As we're not supporting anything older than IE9, we're only going send .woff
 * files (.ttf files will be stored for posterity's sake).
 */

/**
 * Imported Font Styles
 * --------------------
 * 1. Oswald -- Used to maintain parity with basho.com, only used in the banner.
 * 2. Muli -- The primary Riak logotypes have historically been .pngs, and Muli
 *    looks very similar to those pngs. It will be used to create textual
 *    representations of those logotypes.
 * 3. Source Code Pro -- We could use a monospace font, and I love this one.
 * TODO: Consider downloading all of these into static/ and manually defining
 *       these families s.t. we can more precisely control what we send to users
 */
@import url('https://fonts.googleapis.com/css?family=Oswald:400');              /* 1 */
@import url('https://fonts.googleapis.com/css?family=Muli:400,700');            /* 2 */
@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700'); /* 3 */



/**
 * Font Styles
 * -----------
 * The intention here is to @extend these classes wherever fonts should be
 * specified. The font families (defined below) leverage style linking, so
 * _emphasiszing_ or **strengthening** text should already be handled correctly,
 * and the -Bold / -Italic modifiers should not be widely necessary.
 */
/*TODO: Come up with some decent serif fallbacks. */

/* Convenience Classes */
%sans        { @extend %OpenSans; }
%sans-bold   { @extend %OpenSans-Bold; }
%sans-light  { @extend %OpenSans-Light; }
%sans-italic { @extend %OpenSans-Italic; }
%serif        { @extend %GandhiSerif; }
%serif-bold   { @extend %GandhiSerif-Bold; }
%serif-italic { @extend %GandhiSerif-Italic; }

%monospace { font-family : "Source Code Pro", monospace; }
%muli      { font-family : "Muli", sans-serif;           }
%oswald    { font-family : "Oswald", sans-serif;         }


/* Descriptive Font Classes */
%GandhiSerif {
  font-family : "GandhiSerif", serif;
  font-weight : 400;
  font-style  : normal;
}
%GandhiSerif-Bold {
  font-family : "GandhiSerif", serif;
  font-weight : 700;
  font-style  : normal;
}
%GandhiSerif-Italic {
  font-family : "GandhiSerif", serif;
  font-weight : 400;
  font-style  : italic;
}
%GandhiSerif-BoldItalic {
  font-family : "GandhiSerif", serif;
  font-weight : 700;
  font-style  : italic;
}


%OpenSans {
  font-family : "OpenSans", verdana, arial, sans-serif;
  font-weight : 400;
  font-style  : normal;
}
%OpenSans-Light {
  font-family : "OpenSans", verdana, arial, sans-serif;
  font-weight : 300;
  font-style  : normal;
}
%OpenSans-Bold {
  font-family : "OpenSans", verdana, arial, sans-serif;
  font-weight : 700;
  font-style  : normal;
}
%OpenSans-Italic {
  font-family : "OpenSans", verdana, arial, sans-serif;
  font-weight : 400;
  font-style  : italic;
}
%OpenSans-BoldItalic {
  font-family : "OpenSans", verdana, arial, sans-serif;
  font-weight : 700;
  font-style  : italic;
}



/**
 * Font-Face Declarations
 * ----------------------
 */

/** Gandhi Serif */
@font-face {
  font-family : "GandhiSerif"; /* Regular */
  font-weight : 400;
  font-style  : normal;
  src : local("Gandhi Serif Regular"),
        local("GandhiSerif-Regular"),
        url("../fonts/gandhiserif-regular.woff") format("woff");
}

@font-face {
  font-family : "GandhiSerif"; /* Italic */
  font-weight : 400;
  font-style  : italic;
  src : local("Gandhi Serif Italic"),
        local("GandhiSerif-Italic"),
        url("../fonts/gandhiserif-italic.woff") format("woff");
}

@font-face {
  font-family : "GandhiSerif"; /* Bold */
  font-weight : 700;
  font-style  : normal;
  src : local("Gandhi Serif Bold"),
        local("GandhiSerif-Bold"),
        url("../fonts/gandhiserif-bold.woff") format("woff");
}

@font-face {
  font-family : "GandhiSerif"; /* BoldItalic */
  font-weight : 700;
  font-style  : italic;
  src : local("Gandhi Serif Bold Italic"),
        local("GandhiSerif-BoldItalic"),
        url("../fonts/gandhiserif-bolditalic.woff") format("woff");
}



/** Open Sans */
@font-face {
  font-family : "OpenSans"; /* Light */
  font-weight : 300;
  font-style  : normal;
  src : local("Open Sans Light"),
        local("OpenSans-Light"),
        url("../fonts/opensans-light.woff") format("woff");
}

@font-face {
  font-family : "OpenSans"; /* Regular */
  font-weight : 400;
  font-style  : normal;
  src : local("Open Sans Regular"),
        local("OpenSans"),
        url("../fonts/opensans-regular.woff") format("woff");
}

@font-face {
  font-family : "OpenSans"; /* Italic */
  font-weight : 400;
  font-style  : italic;
  src : local("Open Sans Italic"),
        local("OpenSans-Italic"),
        url("../fonts/opensans-italic.woff") format("woff");
}

@font-face {
  font-family : "OpenSans"; /* Bold */
  font-weight : 700;
  font-style  : normal;
  src : local("Open Sans Bold"),
        local("OpenSans-Bold"),
        url("../fonts/opensans-bold.woff") format("woff");
}

@font-face {
  font-family : "OpenSans"; /* BoldItalic */
  font-weight : 700;
  font-style  : italic;
  src : local("Open Sans Bold Italic"),
        local("OpenSans-BoldItalic"),
        url("../fonts/opensans-bolditalic.woff") format("woff");
}





/**
 * Font Icons
 * =============================================================================
 * Custom build web icon font for use around the site. Most commonly used in the
 * Content Navigation top-level items.
 */

/*TODO: Build a reference page that shows and names all of the icons so we can
 *      stop guessing at what they look like.
/*TODO: In the previous iteration of these classes, there were rules that would
 *      allow us to use a `data-icon` attribute to set the icon (ex.
 *      `<span data-icon="lambda" />`). The below was built assuming that
 *      wouldn't be the usual way injecting these icons. Maybe that shouldn't be
 *      the case?
 */

/**
 * Docs Icon Font
 */
@font-face {
  font-family : "DocsFontIcons";
  font-weight : normal;
  font-style  : normal;
  src : local("DocsFontIcons Regular"),
        local("DocsFontIcons"),
        url("../fonts/docsfonticons.woff") format("woff");
}

%docs-icon {
  font-family    : 'DocsFontIcons';
  font-style     : normal;
  font-weight    : normal;
  font-variant   : normal;
  speak          : none;
  text-transform : none;
  line-height    : 1;
}

.docs-icon--lambda        { &:before { @extend %docs-icon; content: "\e005"; } }
.docs-icon--lambda-bold   { &:before { @extend %docs-icon; content: "\e00b"; } }
.docs-icon--beaker        { &:before { @extend %docs-icon; content: "\f0c3"; } }
.docs-icon--cog           { &:before { @extend %docs-icon; content: "\f013"; } }
.docs-icon--github-alt    { &:before { @extend %docs-icon; content: "\e004"; } }
.docs-icon--comments      { &:before { @extend %docs-icon; content: "\e000"; } }
.docs-icon--bolt          { &:before { @extend %docs-icon; content: "\f0e7"; } }
.docs-icon--question-sign { &:before { @extend %docs-icon; content: "\f059"; } }
.docs-icon--tools         { &:before { @extend %docs-icon; content: "\e001"; } }
.docs-icon--search        { &:before { @extend %docs-icon; content: "\f002"; } }
.docs-icon--download-alt  { &:before { @extend %docs-icon; content: "\f019"; } }
.docs-icon--github        { &:before { @extend %docs-icon; content: "\e009"; } }
.docs-icon--reorder       { &:before { @extend %docs-icon; content: "\f0c9"; } }
.docs-icon--more          { &:before { @extend %docs-icon; content: "\e002"; } }
.docs-icon--riak          { &:before { @extend %docs-icon; content: "\e003"; } }
.docs-icon--database      { &:before { @extend %docs-icon; content: "\e006"; } }
.docs-icon--install       { &:before { @extend %docs-icon; content: "\e007"; } }
.docs-icon--cloud         { &:before { @extend %docs-icon; content: "\e008"; } }
.docs-icon--configure     { &:before { @extend %docs-icon; content: "\e00a"; } }
.docs-icon--references    { &:before { @extend %docs-icon; content: "\f02d"; } }
.docs-icon--time          { &:before { @extend %docs-icon; content: "\f017"; } }
