/**
  * Variables naming rule: --{selector aka component aka namespace}-{css property}-{pseudo class or media query name} eg. --p-background-color-hover 
  * NOTE: Within the component don't use any name spacing eg. component header don't use --header-default-color just use --color the namespace can be added by the Shadow as an html attribute
  * - if a component holds other components or nodes you can declare or remap classes eg. :host > h1 {--color: var(--h1-color, white);}
  * - if a component holds other components you should share the attribute namespace with its children
  */
/* font tracking */
@import url('https://fast.fonts.net/t/1.css?apiType=css&projectid=5e1f4e69-c0ff-4ea7-9d90-31a60f088f36'); 


@font-face{
	font-family:"CordaMediumItalic";
	src:url("https://cdn.migros.ch/ch.migros/static/fonts/Corda/CordaW01MediumItalic.woff2") format("woff2"),
  url("https://cdn.migros.ch/ch.migros/static/fonts/Corda/CordaW01MediumItalic.woff") format("woff");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

:root {
  --color-disabled:var(--m-green-100);
  --color-hover:#88B859;
  --color-secondary: #AACF80;
  --emotion-pictures-with-title-bg-background-color-custom: var(--color-secondary);
  --emotion-pictures-with-title-bg-color-custom:var(--m-white);
  --emotion-pictures-with-title-h2-font-family-secondary-custom: var(--font-family-secondary);
  --emotion-pictures-with-title-h2-text-transform-custom: none;
  --font-family-secondary:CordaMediumItalic, sans-serif;
  --footer-default-a-color-hover:var(--color);
  --footer-default-a-color:var(--color-secondary);
  --footer-default-a-text-decoration-hover: underline;
  --footer-default-a-text-decoration:none;
  --footer-default-a-text-underline-offset:0.3em;
  --footer-default-color-hover:var(--color);
  --footer-default-color:var(--footer-default-invert-color);
  --footer-default-invert-a-color-hover-custom:var(--m-black);
  --h1-font-family: CordaMediumItalic, sans-serif;
  --h2-font-family: CordaMediumItalic, sans-serif;
  --h3-font-family: CordaMediumItalic, sans-serif;
  --h4-font-family: CordaMediumItalic, sans-serif;
  --h5-font-family: CordaMediumItalic, sans-serif;
  --h6-font-family: CordaMediumItalic, sans-serif;
  --h2-font-size: 2em;
  --h3-font-size: 1.5em;
  --header-default-a-logo-top-custom:0;
  --header-default-a-logo-top-mobile-custom: calc(69px / 2 - 38px / 2);
  --header-default-a-menu-icon-background-color-custom:var(--color);
  --header-default-background-color-custom:var(--background-color);
  --header-default-border-bottom-custom: 1px solid var(--m-gray-300);
  --header-default-logo-width-custom:190px;
  --navigation-default-color-custom:var(--color);
  --picture-close-btn-background-color:var(--color-secondary);
  --teaser-tile-figcaption-bg-color-equal-padding-custom: 0.7em 0 0;
  --teaser-tile-figcaption-color: var(--color-secondary);
  --teaser-tile-h5-font-size:1.5em;
  --teaser-title-figcaption-background-color: var(--m-white);
  --emotion-pictures-with-title-bg-line-height-secondary-custom: 1.4em;
  --hotspot-default-button-background-color-hover: #AACF80;
  --hotspot-default-button-background-color: #ff6600;
  --hotspot-picture-img-max-height: var(--image-hotspot-width);
  --hotspot-picture-img-width: var(--image-hotspot-width);
  --image-hotspot-width: 100vw;

}