/*
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: #F1F1F1 !default;
$color-gray2: #C0C0C0 !default;
$color-gray3: #9B9B9B !default;

$color-gray5: #333333 !default;
$color-gray6: #0E0E0E !default;

$color-highlight-primary: #DE0000 !default;
$color-highlight-secondary: #00AB00 !default;
$color-brand-primary: $color-black !default;

$color-site-bg: $color-black !default;
$color-site-bg-inverted: $color-white !default;

$color-link-primary: $color-white !default;
$color-link-primary-hover: $color-white !default;

$color-text-muted-primary: $color-gray3 !default;

/* FONT BLOCK */
$font-family-content: Graphik , Arial, sans-serif !default;

$font-family-primary: Graphik, "Helvetica Neue", Helvetica, Arial, sans-serif !default;
$font-family-primary-medium: Graphik, "Helvetica Neue", Helvetica, Arial, sans-serif !default;
$font-family-primary-bold: GraphikBold, "Helvetica Neue", Helvetica, Arial, sans-serif !default;
$font-family-primary-black: GraphikBlack, "Helvetica Neue", Helvetica, Arial, sans-serif !default;

$font-family-secondary: FreightDisplayBook,  Times, "Times New Roman", serif !default;
$font-family-secondary-medium: FreightDisplayMedium,  Times, "Times New Roman", serif !default;
$font-family-secondary-bold: FreightDisplayBold,  Times, "Times New Roman", serif !default;
$font-family-secondary-black: FreightDisplayBlack,  Times, "Times New Roman", serif !default;

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

/* TEASER BLOCK */
$color-teaser-cardbody-bg: $color-gray6 !default;
$color-teaser-cardbody-text: $color-white !default;
$color-teaser-cardbodyvisual-text: $color-white !default;
$color-teaser-cardbodyhighlight-bg: $color-gray6 !default;
$color-teaser-cardbodyhighlight-text: $color-white !default;
$color-teaser-overlay: $color-gray6 !default;
$color-teaser-text-hover: $color-white !default;

/* HEADER BLOCK */
$color-header-bg: $color-black !default;
$color-header-bg-logo: $color-white !default;
$color-header-text-primary: $color-white !default;
$color-header-text-primary-hover: $color-white !default;

$color-overlay-text-primary: $color-white !default;

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

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

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

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

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

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

/* CHECKBOX BLOCK */
$color-checkbox-bg-primary: $color-black !default;
$color-checkbox-border-primary: $color-white !default;
$color-checkbox-text-primary: $color-white !default;

$color-checkbox-bg-primary-hover: $color-white !default;
$color-checkbox-border-primary-hover: $color-white !default;
$color-checkbox-text-primary-hover: $color-gray5 !default;

$color-checkbox-bg-primary-selected: $color-gray5 !default;
$color-checkbox-border-primary-selected: $color-white !default;
$color-checkbox-text-primary-selected: $color-white !default;

/* RADIO BLOCK */
$color-radio-bg-primary: $color-black !default;
$color-radio-border-primary: $color-white !default;
$color-radio-text-primary: $color-white !default;

$color-radio-bg-primary-hover: $color-white !default;
$color-radio-border-primary-hover: $color-white !default;
$color-radio-text-primary-hover: $color-gray5 !default;

$color-radio-bg-primary-selected: $color-gray5 !default;
$color-radio-border-primary-selected: $color-white !default;
$color-radio-text-primary-selected: $color-white !default;

/* FORM BLOCK */
$color-form-placeholder-primary: $color-gray3 !default;
$color-form-invalid-text-primary: $color-highlight-primary !default;
$color-form-invalid-border-primary: $color-highlight-primary !default;

// input
$color-form-input-bg-primary: $color-gray6 !default;
$color-form-input-border-primary: $color-white !default;
$color-form-input-text-primary: $color-white !default;

$color-form-input-bg-primary-hover: $color-gray5 !default;
$color-form-input-border-primary-hover: $color-white !default;
$color-form-input-text-primary-hover: $color-white !default;

$color-form-input-bg-primary-focus: $color-white !default;
$color-form-input-border-primary-focus: $color-white !default;
$color-form-input-text-primary-focus: $color-black !default;

// select
$color-form-select-bg-primary: $color-gray6 !default;
$color-form-select-border-primary: $color-white !default;
$color-form-select-text-primary: $color-white !default;

$color-form-select-bg-primary-hover: $color-gray5 !default;
$color-form-select-border-primary-hover: $color-white !default;
$color-form-select-text-primary-hover: $color-white !default;

$color-form-select-bg-primary-open: $color-white !default;
$color-form-select-border-primary-open: $color-white !default;
$color-form-select-text-primary-open: $color-black !default;

$color-form-select-bg-primary-focus: $color-black !default;
$color-form-select-text-primary-focus: $color-white !default;

// textarea
$color-form-textarea-bg-primary: $color-gray6 !default;
$color-form-textarea-border-primary: $color-white !default;
$color-form-textarea-text-primary: $color-white !default;

$color-form-textarea-bg-primary-hover: $color-gray5 !default;
$color-form-textarea-border-primary-hover: $color-white !default;
$color-form-textarea-text-primary-hover: $color-white !default;

$color-form-textarea-bg-primary-focus: $color-white !default;
$color-form-textarea-border-primary-focus: $color-white !default;
$color-form-textarea-text-primary-focus: $color-black !default;