/* common styles */
:root {
  --brandLogo: url(/vertical/www/meta/common/icons/siteLogo.svg);
  --ivwParentLogo: url(/vertical/www/meta/common/icons/dumont-newsnet-logo.svg);
  --ivwParentLinkHeight: 38px;
  --ivwParentLinkWidth: 50px;
  --fontSize: 16px;
  --textFont: Verdana, Geneva, sans-serif;
  --headlineFont: "Arial Black", Gadget, sans-serif;
  --navHeight: 40px;
  --mobileMargin: 1rem;
  --negativeMobileMargin: -1rem;
  --horizontalRuleHeight: 3px;
  --articleItemMarginBottom: 1rem;
  --displayTeaserInfo: none;
  --adSlotNativeMinHeight: 55vh;

  /* primary colors*/
  --brandColor: rgb(36,121,158);
  --white: white;
  --black: black;
  --flint: rgb(41,41,41);
  --grey:rgb(150,150,150);
  --lightGrey: rgb(242,242,242);
  --darkGrey: rgb(100, 100, 100);
  --shadow: 0 3px 3px rgba(135,135,135,.2);
  --footerGradient: linear-gradient(180deg, rgb(0, 126, 168) 0%, rgb(39, 71, 84) 100%);

  /* derivative colors */
  --rootBGColor: var(--lightGrey);
  --contentBGColor: var(--lightGrey);
  --teaserBGColor: var(--white);
  --articleBGColor: var(--white);
  --mainTextColor: var(--black);
  --navColor: var(--black);
  --linkTextColor: var(--brandColor);
  --active: var(--brandColor);
}

/* mandator specific styles */
:root.rblive {
  --brandLogo: url(/vertical/www/meta/rblive/icons/siteLogo.svg);
  --ivwParentLogo: url(/vertical/www/meta/rblive/icons/ivwParentLogo.svg);
  --ivwParentLinkWidth: 120px;
  --textFont: 'Lato', sans-serif;
  --headlineFont: 'Oswald', sans-serif;
  --brandColor: rgb(221,1,63);
  --navColor: var(--white);
  --footerGradient: linear-gradient(180deg, #142242 0%, #000000 100%);
  --adSlotNativeMinHeight: 0;
}

:root.gladbachlive {
  --brandLogo: url(/vertical/www/meta/gladbachlive/icons/siteLogo.svg);
  --ivwParentLogo: url(/vertical/www/meta/gladbachlive/icons/ivwParentLogo.svg);
  --ivwParentLinkWidth: 38px;

  --textFont: 'Lato', sans-serif;
  --headlineFont: 'Oswald', sans-serif;
  --brandColor: rgba(117,184,67, 1);
  --rootBGColor: var(--black);
  --contentBGColor: var(--black);
  --articleBGColor: var(--flint);
  --mainTextColor: var(--white);
  --navColor: var(--white);
  --teaserBGColor: var(--flint);
  --footerGradient: linear-gradient(180deg, var(--flint) 0%, var(--flint) 100%);
}

:root {
  font-size: var(--fontSize);
  line-height: 1.3;
  font-family: var(--textFont);
  background: var(--rootBGColor);
  color: var(--mainTextColor);
}

@media (prefers-color-scheme: dark) {
  /* dark color scheme here (https://stuffandnonsense.co.uk/blog/redesigning-your-product-and-website-for-dark-mode) */
}