/**
 * 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
 */
:root {
  --background-color: var(--m-white);
  --color-active: var(--color-hover);
  --color-disabled: var(--m-orange-300);
  --color-error: var(--m-red-600);
  --color-hover: var(--m-orange-800);
  --color-secondary: var(--m-orange-600);
  --color-success: var(--m-green-600);
  --color-tertiary: var(--color-secondary);
  --color: var(--m-black);
  --content-spacing-mobile: 1rem;
  --content-spacing: 1.143rem;
  --font-family-bold: HelveticaNowTextBold, HelveticaNowText, Helvetica, Arial, sans-serif;
  --font-family-secondary: Avenir35Light, sans-serif;
  --font-family: HelveticaNowText, Helvetica, Arial, sans-serif;
  --font-size-mobile: min(14px, 5vw);
  --font-size: max(16px, 0.8vw);
  --font-weight: 400;
  --footer-default-content-width: var(--header-default-content-width);
  --header-default-content-width: max(calc(1200px - var(--content-spacing) * 2), 55%); /* Environment.js mobileBreakpoint must correspond to the calc 1200px */
  --line-height: 1.5;
  --navigation-default-content-width: var(--header-default-content-width);
  --outline-color: var(--color-hover);
}
/*
@media (prefers-color-scheme: dark) {
  :root {
    --background-color: var(--m-black);
    --color: var(--m-white);
    --footer-default-invert-a-color-hover-custom: var(--color-hover);
    --footer-default-invert-color-custom: var(--color);
    --header-default-a-menu-icon-background-color-custom: var(--color);
    --navigation-default-color-custom: var(--color);
  }
}
*/