:root, :host, html, .sl-theme-light {
  /*
  color token generator using #4177a2
  https://codepen.io/claviska/full/QWveRgL

  make them important, otherwise the shoelace sl-light style overrides this in some cases, look for a different option?
   */
  --sl-color-primary-50: rgb(248 250 251)!important;
  --sl-color-primary-100: rgb(230 237 243)!important;
  --sl-color-primary-200: rgb(211 224 234)!important;
  --sl-color-primary-300: rgb(191 209 224)!important;
  --sl-color-primary-400: rgb(163 189 210) !important;
  --sl-color-primary-500: rgb(128 164 193)!important;
  --sl-color-primary-600: rgb(90 137 174)!important;
  --sl-color-primary-700: rgb(61 112 153)!important;
  --sl-color-primary-800: rgb(51 93 126)!important;
  --sl-color-primary-900: rgb(36 66 90)!important;
  --sl-color-primary-950: rgb(22 40 55)!important;


  --sl-shadow-x-small: 0 1px 2px hsl(240 3.8% 46.1% / 24%);
  --sl-shadow-small: 0 1px 2px hsl(240 3.8% 46.1% / 48%);
  --sl-shadow-medium: 0 2px 4px hsl(240 3.8% 46.1% / 48%);
  --sl-shadow-large: 0 2px 8px hsl(240 3.8% 46.1% / 48%);
  --sl-shadow-x-large: 0 4px 16px hsl(240 3.8% 46.1% / 48%);


  /*** APPLICATION ***/

  egw-app {
	--application-header-text-color: var(--sl-color-neutral-100);
  }

  /*** End APPLICATION ***/
}