// SET UP YOUR VARIABLES IN THIS FILE

// Colors
// ------------------------------------------------------------
// Define your main color palette


// Commonly used colors
$blue: #5d93c0;
$red: #8a0808;
$yellow: #ffc000;
$orange: #de6327;
$green: #88b046;
$almost-black: #232220;
$gray-1: #262626;
$gray-2: #525252;
$gray-3: #a6a093;
$gray-4: #b9b9b9;
$gray-5: #a5967d;
$gray-6: #736957;
$gray-7: #e1dbd1;
$gray-8: #d2cfc9;

// Default colors
$bg-clr-body: $almost-black;
$txt-clr: $almost-black; // The default text color for the body
$txt-clr-alt: #fff; // The color for text in blocks that have a dark background (brown or almost black)
$txt-clr-muted: $gray-3;

// Headings (h1 - h6 elements)
$txt-clr-headings: $almost-black;
$txt-clr-headings-link: $gray-6;
$txt-clr-headings-link-alt: $orange;
$txt-clr-headings-alt: #fff;

// Links
$txt-clr-link: $orange;
$txt-clr-link-alt: darken($orange, 20%);

// Forms

$bg-clr-btn-1: #fff;
$brd-clr-btn-1: rgba($gray-3, 0.5);
$txt-clr-btn-1: $gray-6;
$bg-clr-btn-1-alt: $bg-clr-btn-1;
$brd-clr-btn-1-alt: rgba($gray-3, 1);
$txt-clr-btn-1-alt: $orange;

$bg-clr-btn-2: $gray-8;
$brd-clr-btn-2: $bg-clr-btn-2;
$txt-clr-btn-2: $gray-6;
$bg-clr-btn-2-alt: $orange;
$brd-clr-btn-2-alt: $bg-clr-btn-2-alt;
$txt-clr-btn-2-alt: #fff; // Only the text changes

$bg-clr-btn-3: $gray-6;
$brd-clr-btn-3: $bg-clr-btn-3;
$txt-clr-btn-3: #fff;
$bg-clr-btn-3-alt: #232220;
$brd-clr-btn-3-alt: $bg-clr-btn-3-alt;
$txt-clr-btn-3-alt: $txt-clr-btn-3; // Only the background changes

$bg-clr-btn-4: rgba(#fff, 0);
$brd-clr-btn-4: rgba(#fff, 0.5);
$txt-clr-btn-4: #fff;
$bg-clr-btn-4-alt: rgba(#fff, 1);
$brd-clr-btn-4-alt: rgba(#fff, 1);
$txt-clr-btn-4-alt: $orange;

$bg-clr-btn-5: transparent;
$brd-clr-btn-5: rgba(#fff, 0.25);
$txt-clr-btn-5: $gray-3;
$bg-clr-btn-5-alt: $bg-clr-btn-5;
$brd-clr-btn-5-alt: rgba(#fff, 0.5);
$txt-clr-btn-5-alt: #fff;

$brd-clr-input: rgba($gray-3, 0.5);
$txt-clr-input: $gray-6;
$brd-clr-input-alt: rgba($gray-3, 1);
$txt-clr-input-alt: $txt-clr;



// ------------------------------------------------------------
// Fonts, measure, leading and typefaces
// ------------------------------------------------------------
// Fonts size and line height defaults for our calculations
// Dimensions of elements, grid system, etc.

// Sets the browser default size. Shouldn't need to change this.
$browser-font-size: 16px;

// Round the line height to the nearest half line height. Off by default
$round-to-nearest-half-line: false;

// Columns
$cols: 12; // The amount of columns in the grid
$gutter-w: 30px;

// The "normal" width of the content
$site-w: 978px;

// Breakout widths of the content (content that "spills" over the default width of the site)
$site-w-breakout-s: 998px;
$site-w-breakout-m: 1080px;
// $site-w-breakout-l:


// Font sizes work the same as colors:
// First, the font-sizes used throughout the site are defined
// Then, they are assigned to headings and text sizes

// Font-sizes used in the site
$fs-1: 48px;
$fs-2: 36px;
$fs-3: 30px;
$fs-4: 24px;
$fs-5: 21px;
$fs-6: 18px;
$fs-7: 15px;
$fs-8: 14px;
$fs-9: 11px;

// Font-sizes for headings (< 640px)
$fs-h1-1: $fs-2;
$fs-h2-1: $fs-3;
$fs-h3: $fs-3;
$fs-h4: $fs-4;
$fs-h5: $fs-7;
$fs-h6: $fs-7;

// Font-sizes for headings (>= 640px)
$fs-h1-2: $fs-1;
$fs-h2-2: $fs-2;

// Text font-sizes
$fs-t1: $fs-3;
$fs-t2: $fs-5;
$fs-t3: $fs-6;
$fs-t4: $fs-7;
$fs-t5: $fs-8;
$fs-t6: $fs-9;

// The default font-size for the site
$fs-default: $fs-t3;

// Some helpers for smaller and larger font sizes
$fs-xl: $fs-t1;
$fs-l: $fs-t2;
$fs-s: $fs-t4;
$fs-xs: $fs-t5;
$fs-xxs: $fs-t6;

// The default line-height for the site
$lh-default: 27px;

// Some helpers for the line-height
$lh-l: 31px;
$lh-s: 23px;
$lh-xs: 21px;

// Heading line-heights
$lh-h1-1: $fs-h1-1;
$lh-h2-1: $fs-h2-1;
$lh-h3: 34px;
$lh-h4: 27px;
$lh-h5: 17px;
$lh-h6: 23px;

// Heading line-heights (>= 640px)
$lh-h1-2: $fs-h1-2;
$lh-h2-2: $fs-h2-2;


// ------------------------------------------------------------
// Miscellaneous
// ------------------------------------------------------------

$default-spacing: 5%;
$default-spacing-static: 20px;
$experimental-support-for-svg: true; // Use SVG in IE9 to generate backgrounds



// ------------------------------------------------------------
// Styles per element
// ------------------------------------------------------------

// Header
$header-h: 80px; // The default height for the header bar (>= 848px)
$header-h-with-image: 250px; // The min-height of the header if a header image has been defined (< 640px)
$header-h-homepage-1: 450px;
$header-h-homepage-2: 600px;

$header-bg-clr: rgba(#000, 0.8); // Default header bar color when no header image is set

$header-bg-clr-light: rgba(#000, 0.1); // The background color of the header bar when a header image has been set (< 848px)
$header-bg-clr-light-alt: rgba(#000, 0.8); // When the header menu is expanded (< 848px)

$header-h-clr-light: 150px; // The height of the "light" header bar that has a gradient (used on pages that have a header image, >= 848px)
$header-bg-clr-light-fullwidth: rgba(#000, 0); // The background color for the header bar when the menu doesn't expand/collapse (>= 848px)
$header-bg-clr-light-fullwidth-top: rgba(#000, 0.35); // Top gradient in the header bar (>= 848px)
$header-bg-clr-light-fullwidth-bottom: rgba(#000, 0); // Bottom gradient in the header bar (>= 848px)

// Nav
$nav-btn-bg: #000;
$nav-btn-w: 30px;
$nav-btn-h: $nav-btn-w;
$nav-link-clr: darken(#fff, 15%);
$nav-link-clr-action: #fff;

// Site content
$content-clr: #fff;
$content-clr-alt: $gray-3;
// The two colors for the gradient behind dark blocks
$content-clr-alt-2: #171615;
$content-clr-alt-3: #2d2b29;

// The color for the "lighter" block used on the homepage
$content-clr-alt-4: #fafafa;

// Galleries
$gallery-spacing: 10px;