/*
The variables follow a strict pattern. Mind this whenever you have to create a new scss variable.

property - similar to css property. (eg. color, font,..)
section  - wherever this css comes in place (eg. text, button,..)
variant  - variant of this style. (eg. primary, secondary,..)
optional - optional parameters. (eg. hover, inverted,..)

$<property>-<section>-<variant>[-<optional>,[-<optional>]]
$color-text-primary-hover

The colorings and variables are based on the atelier
http://atelier.prod.cni.digital/?path=/story/styles--colors
This is made to have a more equal CI than using our own scss variables.

*/

/* GENERIC BLOCK */
// you may no override these breakpoints as these are bootstrap defaults
$break-xs: 320px;
$break-sm: 576px;
$break-md: 768px;
$break-lg: 992px;
$break-xl: 1200px;
$break-xxl: 1480px;

$color-black: #000000 !default;
$color-white: #FFFFFF !default;

$color-gray1: #2D2D2D !default;
$color-gray2: #4C4C4C !default;
$color-gray3: #6C6C6C !default;
$color-gray4: #9c9cac !default;
$color-gray5: #cacaca !default;
$color-gray6: #f2f2f2 !default;

$color-highlight-primary: #00EE00 !default;
$color-brand-primary: #EE00EE !default;

$color-site-bg: #FFFFFF !default;
$color-ads-bg: #EEEEEE !default;
$color-box-bg-primary: $color-gray6 !default;
$color-box-bg-colored: $color-gray6 !default;

$color-line-primary: $color-black !default;
$color-line-secondary: $color-gray5 !default;
$color-line-tertiary: $color-gray6 !default;
$color-line-colored: $color-brand-primary !default;

$color-muted-primary: $color-gray4 !default;
$color-muted-secondary: $color-gray5 !default;
$color-muted-tertiary: $color-gray6 !default;

$color-link-primary: $color-brand-primary !default;
$color-link-primary-hover: $color-black !default;

/* FONT BLOCK */
$font-family-content: Georgia, serif !default;

$font-family-primary: Times, "Times New Roman", serif !default;
$font-family-primary-bold: "Times Bold", Times, "Times New Roman", serif !default;
$font-family-primary-black: "Times Black", Times, "Times New Roman", serif !default;

$font-family-secondary: Arial, "Helvetica Neue", Helvetica, Arial, sans-serif !default;
$font-family-secondary-bold: "Arial Bold", "Helvetica Neue", Helvetica, Arial, sans-serif !default;
$font-family-secondary-black: "Arial Black", "Helvetica Neue", Helvetica, Arial, sans-serif !default;

/* TEXT BLOCK */
$color-text-primary: $color-black !default;
$color-text-primary-inverted: $color-white !default;
$color-text-intro-primary: $color-black !default;

/* TEASER BLOCK */
$color-teaser-cardbody-bg: $color-white !default;
$color-teaser-overlay: $color-brand-primary !default;
$color-teaser-text-hover: $color-gray2 !default;
$color-teaser-sponsoredcontent-bg: $color-gray1 !default;

/* HEADER BLOCK */
$color-header-bg: $color-black !default;
$color-header-bg-logo: $color-white !default;
$color-header-bg-inverted: $color-black !default;
$color-header-line-primary: $color-white !default;
$color-header-line-secondary: $color-gray1 !default;
$color-header-text-primary: $color-black !default;
$color-header-text-primary-hover: $color-brand-primary !default;

$color-overlay-text-primary: $color-white !default;
$color-overlaymenu-socialhl: $color-gray4 !default;
$color-overlaymenu-sectionhl: $color-gray4 !default;

/* FOOTER BLOCK */
$color-footer-bg: $color-black !default;
$color-footer-bg-logo: $color-gray1 !default;
$color-footer-bg-inverted: $color-white !default;
$color-footer-text-primary: $color-white !default;
$color-footer-text-primary-hover: $color-gray4 !default;

/* PLACEHOLDER BLOCK */
$color-placeholder-oembed-bg: $color-gray6 !default;
$color-placeholder-noamp-bg: $color-gray6 !default;

/* SECTION BLOCK */
//----- Product
$color-product-border: $color-brand-primary !default;
$color-product-bg: $color-site-bg !default;

//----- infobox
$color-infobox-border: $color-highlight-primary !default;
$color-infobox-label: $color-highlight-primary !default;
$color-infobox-text: $color-text-primary-inverted !default;

/* BUTTON BLOCK */
//----- primary
//--- primary default
$color-button-bg-primary: $color-brand-primary !default;
$color-button-border-primary: $color-brand-primary !default;
$color-button-text-primary: $color-white !default;

$color-button-bg-primary-hover: $color-gray1 !default;
$color-button-border-primary-hover: $color-gray1 !default;
$color-button-text-primary-hover: $color-white !default;

//--- primary disabled
$color-button-bg-primary-disabled: $color-gray6 !default;
$color-button-border-primary-disabled: $color-gray6 !default;
$color-button-text-primary-disabled: $color-white !default;

$color-button-bg-primary-disabled-hover: $color-gray6 !default;
$color-button-border-primary-disabled-hover: $color-gray6 !default;
$color-button-text-primary-disabled-hover: $color-white !default;

//--- primary inverted
$color-button-bg-primary-inverted: $color-brand-primary !default;
$color-button-border-primary-inverted: $color-brand-primary !default;
$color-button-text-primary-inverted: $color-white !default;

$color-button-bg-primary-inverted-hover: $color-brand-primary !default;
$color-button-border-primary-inverted-hover: $color-brand-primary !default;
$color-button-text-primary-inverted-hover: $color-white !default;

//--- primary disabled & inverted
$color-button-bg-primary-disabled-inverted: $color-gray1 !default;
$color-button-border-primary-disabled-inverted: $color-gray1 !default;
$color-button-text-primary-disabled-inverted: $color-gray2 !default;

$color-button-bg-primary-disabled-inverted-hover: $color-gray1 !default;
$color-button-border-primary-disabled-inverted-hover: $color-gray1 !default;
$color-button-text-primary-disabled-inverted-hover: $color-gray2 !default;

//----- secondary
//--- secondary default
$color-button-bg-secondary: transparent !default;
$color-button-border-secondary: $color-gray1 !default;
$color-button-text-secondary: $color-gray1 !default;

$color-button-bg-secondary-hover: $color-gray1 !default;
$color-button-border-secondary-hover: $color-gray1 !default;
$color-button-text-secondary-hover: $color-white !default;

//--- secondary disabled
$color-button-bg-secondary-disabled: transparent !default;
$color-button-border-secondary-disabled: $color-gray6 !default;
$color-button-text-secondary-disabled: $color-gray5 !default;

$color-button-bg-secondary-disabled-hover: transparent !default;
$color-button-border-secondary-disabled-hover: $color-gray6 !default;
$color-button-text-secondary-disabled-hover: $color-gray5 !default;

//--- secondary inverted
$color-button-bg-secondary-inverted: transparent !default;
$color-button-border-secondary-inverted: transparent !default;
$color-button-text-secondary-inverted: $color-white !default;

$color-button-bg-secondary-inverted-hover: $color-white !default;
$color-button-border-secondary-inverted-hover: $color-white !default;
$color-button-text-secondary-inverted-hover: $color-gray1 !default;

//--- secondary disabled & inverted
$color-button-bg-secondary-disabled-inverted: transparent !default;
$color-button-border-secondary-disabled-inverted: transparent !default;
$color-button-text-secondary-disabled-inverted: $color-gray1 !default;

$color-button-bg-secondary-disabled-inverted-hover: transparent !default;
$color-button-border-secondary-disabled-inverted-hover: transparent !default;
$color-button-text-secondary-disabled-inverted-hover: $color-gray1 !default;

//----- ghost /-> atelier
//--- ghost default
$color-button-bg-ghost: transparent !default;
$color-button-border-ghost: transparent !default;
$color-button-text-ghost: $color-gray1 !default;

$color-button-bg-ghost-hover: transparent !default;
$color-button-border-ghost-hover: transparent !default;
$color-button-text-ghost-hover: $color-button-bg-primary !default;

//--- ghost disabled
$color-button-bg-ghost-disabled: transparent !default;
$color-button-border-ghost-disabled: transparent !default;
$color-button-text-ghost-disabled: $color-gray5 !default;

$color-button-bg-ghost-disabled-hover: transparent !default;
$color-button-border-ghost-disabled-hover: transparent !default;
$color-button-text-ghost-disabled-hover: $color-gray5 !default;

//--- ghost inverted
$color-button-bg-ghost-inverted: transparent !default;
$color-button-border-ghost-inverted: transparent !default;
$color-button-text-ghost-inverted: $color-white !default;

$color-button-bg-ghost-inverted-hover: transparent !default;
$color-button-border-ghost-inverted-hover: transparent !default;
$color-button-text-ghost-inverted-hover: $color-brand-primary !default;

//--- ghost disabled & inverted
$color-button-bg-ghost-disabled-inverted: transparent !default;
$color-button-border-ghost-disabled-inverted: transparent !default;
$color-button-text-ghost-disabled-inverted: $color-gray5 !default;

$color-button-bg-ghost-disabled-inverted-hover: transparent !default;
$color-button-border-ghost-disabled-inverted-hover: transparent !default;
$color-button-text-ghost-disabled-inverted-hover: $color-gray5 !default;

//----- link
$color-button-bg-link: transparent !default;
$color-button-border-link: transparent !default;
$color-button-text-link: $color-brand-primary !default;

$color-button-bg-link-hover: transparent !default;
$color-button-border-link-hover: transparent !default;
$color-button-text-link-hover: $color-brand-primary !default;

/* TAGS BLOCK */
//----- primary
$color-tags-bg-primary: $color-brand-primary !default;
$color-tags-border-primary: $color-brand-primary !default;
$color-tags-text-primary: $color-white !default;

$color-tags-bg-primary-hover: $color-gray1 !default;
$color-tags-border-primary-hover: $color-gray1 !default;
$color-tags-text-primary-hover: $color-white !default;