@use "sass:color";
$logo_width: 170px;
// Colors

$text: #002a3a; //midnight sky
$text-visited: #1d3c4b; //midnight sky, tint 1
$text-hover: #4c636f; //midnight sky, tint 2
$text-light: #647782; //midnight sky, tint 3
$text-light-darker: #4c636f; //midnight sky, tint 2
$text-light-darkest: #1d3c4b; //midnight sky, tint 1

$text-link-alternate: #0053b8; //pacific blue
$text-link-alternate-lighter: #137cc1; //pacific blue tint 1
$text-link-alternate-darker: #00529e;

$line: #ccd3d6; //sf fog, shade 1
$line-lighter: #f6f8f8; // sf fog, tint 1
$highlight: #b9d9eb; //pacific sky, formerly $green-very-light
$highlight-lighter: #c7dfee;
$highlight-lightest: #f4f8fb;
$accent: #2cd5c4; //seafoam mint, formerly $green-light

$attention-light: #4fb3e3;
$attention: #00a3e0; //formerly $green-medium, open sky
$attention-dark: #0082b3; //formerly $green-medium-dark, open sky, tent 1
$core:  #0053b8; //pacific blue
$accent-dark: #003b5c; //deep blue sea, formerly $green-dark, $green-dark-text unused
$accent-light: #7b96a9; //deep blue sea, tint 2
$white: #fff;
$warning-light: #ffc460; //golden poppy, tint 2
$warning: #ffb81c; //golden poppy
$warning-dark: #cc9316; //golden poppy, shade 1
$background-darkest:  #D9E1E2;
$background-darker: #f5f7f7; //SF Fog, tint 1
$background-lightest: #fff; //pure white

$alert: #f65275; // malibu sunrise
$alert-light: #fe7d8f; // malibu sunrise tint 1
$alert-lightest: #ffafb7; // malibu sunrise tint 2
$alert-dark: #7b293b; // malibu sunrise shade 3
$font-path: "../fonts/fira-mono";

// @font-face declarations

@font-face {
    font-family: 'Fira Mono';
    src: url('#{$font-path}/FiraMono-Regular.eot');
    src: url('#{$font-path}/FiraMono-Regular.eot') format('embedded-opentype'),
         url('#{$font-path}/FiraMono-Regular.woff') format('woff'),
         url('#{$font-path}/FiraMono-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Fira Mono';
    src: url('#{$font-path}/FiraMono-Bold.eot');
    src: url('#{$font-path}/FiraMono-Bold.eot') format('embedded-opentype'),
         url('#{$font-path}/FiraMono-Bold.woff') format('woff'),
         url('#{$font-path}/FiraMono-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

// Media Queries Mixin (https://jakearchibald.github.io/sass-ie/)
@mixin respond-min($width) {
    @media screen and (min-width: $width) {
        @content;
    }
}

@mixin respond-max($width) {
    @media screen and (max-width: $width) {
        @content;
    }
}

@mixin device-min($width) {
    @media screen and (min-device-width: $width) {
        @content;
    }
}

// Retina media query mixin
@mixin retina-display {
    @media only screen and
    (-webkit-min-device-pixel-ratio: 2),
    (min-resolution: 192dpi) {
        @content;
    }
}

// Font Family Mixins
@mixin serif {
    font-family: "Noto Serif", 'Iowan Old Style', 'Apple Garamond', 'Baskerville', 'Times New Roman', serif;
}
@mixin sans-serif {
    font-family: "Open Sans", "Segoe UI", Tahoma, sans-serif;
    
}
@mixin monospace {
    font-family: "Fira Mono", Consolas, Menlo, Monaco, "Courier New", Courier, monospace;
    font-variant-ligatures: no-common-ligatures;  // disables the common ligatures only
    text-rendering: optimizeSpeed;  // for Safari 7.x
}
@mixin heading-sans-serif {
    font-family: "Open Sans Condensed", Impact, "Franklin Gothic Bold", sans-serif;
}
@mixin stripes {
    background-image: -webkit-linear-gradient(-45deg, rgba(0, 0, 0, .04) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .04) 50%, rgba(0, 0, 0, .04) 75%, transparent 75%, transparent);
    background-image: -moz-linear-gradient(-45deg, rgba(0, 0, 0, .04) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .04) 50%, rgba(0, 0, 0, .04) 75%, transparent 75%, transparent);
    background-image: linear-gradient(135deg, rgba(0, 0, 0, .04) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .04) 50%, rgba(0, 0, 0, .04) 75%, transparent 75%, transparent);
}
@mixin warning-stripes {
    background-color: $warning;
    background-image: linear-gradient(135deg, $warning-light 25%, transparent 25%, transparent 50%, $warning-light 50%, $warning-light 75%, transparent 75%, transparent);
}

// Font Sizing Mixin (http://css-tricks.com/snippets/css/less-mixin-for-rem-font-sizing/)
html {
    font-size: 62.5%;
}
@mixin font-size ( $size: 16 ) {
    font-size: $size + px;
    font-size: calc($size / 10) + rem;
}

// Boilerplate Helper mixins (https://github.com/h5bp/html5-boilerplate/blob/v4.1.0/doc/css.md)
@mixin visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
@mixin clearfix {
    &:before,
    &:after {
        content: "";
        display: table;
    }
    &:after {
        clear: both;
    }
}

@mixin svg-image ( $name ) {
    background-image: url('../img/'+$name+'.png');
    .mdzr-svg & {
        background-image: url('../img/'+$name+'.svg');
    }
}

// Green Link Mixin
@mixin link-alternate { //todo make non-colour oriented
    color: $text-link-alternate;
    text-decoration: none;
    &:visited {
        color: $text-link-alternate;
    }
    &:hover,
    &:active,
    &:focus {
        color: $text-link-alternate-lighter;
        text-decoration: none;
    }

}

// Secondary content box-shadow:
@mixin secondary-shadow-top {
    -moz-box-shadow: 0 4px 8px adjust-color($accent-dark, $alpha: 0.07);
    -webkit-box-shadow: 0 4px 8px adjust-color($accent-dark, $alpha: 0.07);
    box-shadow: 0 4px 8px adjust-color($accent-dark, $alpha: 0.07);
}

@mixin secondary-shadow-bottom {
    -moz-box-shadow: 0 -4px 8px  adjust-color($accent-dark, $alpha: 0.07);
    -webkit-box-shadow: 0 -4px 8px adjust-color($accent-dark, $alpha: 0.07);
    box-shadow: 0 -4px 8px  adjust-color($accent-dark, $alpha: 0.07);
}

@mixin framed-image {
    padding: 20px;
    border: 1px solid $line;
    border-radius: 4px;
}