// Global Color Board (Referenced by semantic colors)
// --------------------------------------------------
@hdeng-color-red: #990033;
@hdeng-color-lightred: #c27386;

@hdeng-color-white: #fff;
@hdeng-color-silver: #ccc;
@hdeng-color-davys-grey: #777;

@hdeng-color-nemo: #33373e; // lighten(base, 6%)
@hdeng-color-dolphin: #2e3238; // lighten(base, 4%)
@hdeng-color-shark: #25282D; // base
@hdeng-color-dark: #1c1e22; // darken(base, 4%)
@hdeng-color-moonlight: #191C1F;
@hdeng-color-night: #131417; // darken(base, 8%)

// Semantic Colors (Used within modules)
// --------------------------------------------------
//== Header
@hdeng-header-bg-default-color: @hdeng-color-dark;
@hdeng-header-bg-contrast-color: @hdeng-color-night;
@hdeng-header-bg-highlight-color: @hdeng-key-color;

@hdeng-header-font-default-color: @hdeng-color-silver;
@hdeng-header-font-contrast-color: @hdeng-color-white;
@hdeng-header-font-highlight-color: @hdeng-key-color;

//== Body
@hdeng-body-bg-default-color: @hdeng-color-shark;
@hdeng-body-bg-nuance-color: rgba(0, 0, 0, 0.05);
@hdeng-body-bg-contrast-color: @hdeng-color-dark;
@hdeng-body-bg-highlight-color: @hdeng-key-color;

@hdeng-body-bg-separator-color: @hdeng-color-dolphin;
@hdeng-body-bg-separator-primary-color: @hdeng-color-nemo;

@hdeng-body-font-default-color: @hdeng-color-silver;
@hdeng-body-font-contrast-color: @hdeng-color-davys-grey;
@hdeng-body-font-highlight-color: @hdeng-color-white;

//== Footer
@hdeng-footer-bg-default-color: @hdeng-color-dark;
@hdeng-footer-bg-contrast-color: @hdeng-color-night;
@hdeng-footer-bg-highlight-color: @hdeng-key-color;

@hdeng-footer-font-default-color: @hdeng-color-davys-grey;
@hdeng-footer-font-contrast-color: @hdeng-color-davys-grey;
@hdeng-footer-font-highlight-color: @hdeng-key-color;

//== Global
@hdeng-key-color: @hdeng-color-red;
@hdeng-highlight-color: @hdeng-color-lightred;

@hdeng-link-color: @hdeng-highlight-color;
@hdeng-link-hover-color: darken(@hdeng-link-color, 20%);
@hdeng-link-hover-decoration: underline;

//== States
@hdeng-state-success-text: #3c763d;
@hdeng-state-success-bg: #dff0d8;
@hdeng-state-success-border: darken(@hdeng-state-success-bg, 5%);

@hdeng-state-info-text: #31708f;
@hdeng-state-info-bg: #d9edf7;
@hdeng-state-info-border: darken(@hdeng-state-info-bg, 7%);

@hdeng-state-warning-text: #8a6d3b;
@hdeng-state-warning-bg: #fcf8e3;
@hdeng-state-warning-border: darken(@hdeng-state-warning-bg, 5%);

@hdeng-state-danger-text: #a94442;
@hdeng-state-danger-bg: #f2dede;
@hdeng-state-danger-border: darken(@hdeng-state-danger-bg, 5%);

// Typography
// --------------------------------------------------
@hdeng-base-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
@hdeng-base-font-size: 16px;
@hdeng-base-line-height: 1.4;
@hdeng-base-line-height-computed: floor((@hdeng-base-font-size * @hdeng-base-line-height)); // ~22px for use with `margin`, `padding`, etc.
@hdeng-base-font-weight: 400;

@hdeng-base-font-size-large: 20px;
@hdeng-base-font-size-medium: 14px;
@hdeng-base-font-size-small: 12px;

// Subnav
// --------------------------------------------------
@hdeng-subnav-height: 100px;
@hdeng-subnav-z-index: 900;
@hdeng-subnav-height-small: 70px;
@hdeng-subnav-height-mobile: 40px;

// Scaffolding units
// --------------------------------------------------
@hdeng-gutter: 2%;

@hdeng-container-max-width: 1200px;
@hdeng-content-padding: @hdeng-spacing;
@hdeng-content-padding-mobile: (@hdeng-spacing / 2);
@hdeng-content-padding-vertical: (@hdeng-spacing * 2);
@hdeng-content-padding-vertical-mobile: @hdeng-spacing;

// @TODO Remove
// BC variables
@hdeng-content-padding-small: @hdeng-content-padding-mobile;

@hdeng-content-width: 860px; // basically 2* @hdeng-content-padding are added inside

// Layout / Styling units
// --------------------------------------------------
@hdeng-spacing: @hdeng-base-line-height-computed;
@hdeng-border-radius: 2px;

// Responsive Breakpoints
// --------------------------------------------------
@hdeng-breakpoint-container: (@hdeng-container-max-width + (@hdeng-content-padding * 2));
@hdeng-breakpoint-mobile: 480px;

// @TODO Remove
// BC variables
@hdeng-breakpoint-content: @hdeng-breakpoint-container;
@hdeng-breakpoint-subnav: @hdeng-breakpoint-container;
@hdeng-breakpoint-tablet: 1024px;
@hdeng-breakpoint-large: 850px;
@hdeng-breakpoint-default: 768px;
@hdeng-breakpoint-small: 850px;
