/**
  * 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://cdn.fonts.net/t/1.css?apiType=css&projectid=7daa9aab-cb4e-473d-a425-107b2145f70b");

:root {
  --bg-color-hover: white;
  --bull-color-hover: var(--color-secondary);
  --bull-li-before-height: 0.4em;
  --bull-li-before-width: 0.4em;
  --color-disabled: #646464;
  --color-hover: #b995cb;
  --color-secondary: #61088c;
  --color-tertiary: #61088c;
  --emotion-pictures-with-button-bg-background-color-custom: var(--color-secondary);
  --emotion-pictures-with-button-bg-color-custom: var(--bg-color-hover);
  --emotion-pictures-with-logo-bg-background-color-custom: var(--color-secondary);
  --emotion-pictures-with-logo-bg-color-custom: var(--bg-color-hover);
  --emotion-pictures-with-title-bg-background-color-custom: var(--color-secondary);
  --emotion-pictures-with-title-bg-color-custom: var(--bg-color-hover);
  --footer-default-invert-background-color-custom: var(--color-tertiary);
  --wrapper-text-color: var(--color-tertiary);
  --header-default-a-logo-top-custom: calc(60px / 2 - 16px / 2);
  --header-default-a-logo-top-mobile-custom: 2em;
  --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: min(12em, 190px);
  --navigation-default-color-custom: var(--color);
  --ol-color:var(--color-secondary);
  --hotspot-width: 55%;
  --hotspot-width-mobile: calc(100% - var(--content-spacing-mobile) * 2);
  --hotspot-picture-img-max-height: 100%;
  --hotspot-picture-img-width: 100%;
  --hotspot-width-mobile: calc(100% - var(--content-spacing-mobile) * 2);
  --hotspot-width: 55%;
  --logo-default-max-width: calc(100% - 1em);
  --logo-default-max-width-mobile: 100%;
  --navigation-alnatura-a-link-line-height: 1.5em;
  --navigation-default-color-custom: var(--color);
  --navigation-yearbooks-color-mobile-custom: var(--color);
  --navigation-yearbooks-color-second-level-custom: var(--color);
  --navigation-yearbooks-header-default-border-bottom: none;
  --ol-color:var(--color-secondary);
}