/* APP CONFIG */
:root {
  --primary: var(--kio-color-ref-brand-100);
  --primary-alpha: var(--kio-color-ref-brand-75);
  --primary-light: var(--kio-color-ref-brand-25);
  --primary-10: var(--kio-color-ref-brand-10);
  --primary-20: var(--kio-color-ref-brand-25);
  --accent: var(--kio-color-ref-blue-100);
  --accent-20: #d5e3ed;
  --error: var(--kio-color-ref-red-75);
  --warn: var(--kio-color-ref-yellow-75);

  --hover: rgba(0, 0, 0, 0.1);
  --selection: rgba(0, 0, 0, 0.15);

  /* TEXT COLOR */
  --primary-text-color: var(--kio-color-ref-grey-100);
  --primary-text-contrast-color: var(--kio-color-ref-grey-white);
  --accent-text: var(--kio-color-ref-grey-white);
  --secondary-text-color: var(--kio-color-ref-grey-50);
  --secondary-text-color-lighter: var(--kio-color-ref-grey-25);
  --disabled-text-color: var(--kio-color-ref-grey-50);

  /* BACKGROUND COLOR */
  --primary-background-color: #eeeeee;
  --primary-sidenav-color: #dfdfdf;
  --primary-header-color: var(--kio-color-ref-grey-100);
  --primary-card-header-color: none;
  --warning-background: var(--kio-color-ref-yellow-75);

  /* TREND COLOR */
  --positive-color: var(--kio-color-ref-green-125);
  --negative-color: var(--kio-color-ref-red-125);
  --neutral-color: var(--kio-color-ref-blue-125);
  --warning-color: var(--kio-color-ref-yellow-125);
  --warning-color-alpha: var(--kio-color-ref-yellow-75);

  /* FEATURES COLOR */
  --heating-color: var(--kio-color-ref-orange-100);
  --hot-water-color: var(--kio-color-ref-red-75);
  --electricity-color: var(--kio-color-ref-yellow-75);
  --electricity-heating-color: var(--kio-color-ref-orange-75);
  --cold-water-color: var(--kio-color-ref-blue-75);
  --hot-water-flow-color: var(--kio-color-ref-blue-100);
  --estimation-color: #00bdef;
  --energy-goal-color: rgba(18, 153, 0, 1);
  --energy-goal-color-half: rgba(18, 153, 0, 0.5);
  --reference-year-color: var(--kio-color-ref-grey-125);

  /* SEASONS COLOR */
  --summer-color: var(--kio-color-ref-red-75);
  --winter-color: var(--kio-color-ref-blue-100);
  --spring-color: var(--kio-color-ref-green-75);
  --autumn-color: var(--kio-color-ref-orange-100);
  --current-color: var(--kio-color-ref-grey-125);

  /* SERIES COLOR */
  --series-color-1: var(--kio-color-ref-green-75);
  --series-color-2: var(--kio-color-ref-orange-100);
  --series-color-3: var(--kio-color-ref-blue-100);
  --series-color-4: var(--kio-color-ref-red-75);
  --series-color-5: var(--kio-color-ref-yellow-100);

  /* ATOMIC COLOR */
  --zebra-color: rgba(0, 0, 0, 0.05);

  --app-sidebar-width: 80px;
  --app-sidebar-color: var(--kio-color-ref-grey-10);
  --app-top-bar-height: 55px;
  --app-hover: rgba(0, 0, 0, 0.1);
  --app-box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.25);
  --app-box-shadow-2: 0 0 4px 0 rgba(51, 51, 51, 0.20);
  --app-easin-in: 0.2s ease-in all;
  --app-letter-spacing-default: 0.2px;
  --app-stroke-focus-default: 2px solid var(--kio-color-ref-grey-100);
  --app-stroke-focus-subtle: 1px solid var(--kio-color-ref-grey-100);
  --app-top-bar-stroke-focus: 2px solid var(--kio-top-bar-stroke-focus);
  --app-top-bar-stroke-focus-subtle: 1px solid var(--kio-top-bar-stroke-focus);
  --app-box-shadow-3: 0 0 6px 0 rgba(51,51,51,0.25)
}