/* siemens 20211025 */

@font-face {
  font-family: 'SiemensSans_Prof';
  font-style: normal;
  font-weight: 400;
  src: url('font_custom/SiemensSans_Prof_Roman.woff2') format('woff2'),
    url('font_custom/SiemensSans_Prof_Roman.woff') format('woff');
}

@font-face {
  font-family: 'SiemensSans_Prof';
  font-style: normal;
  font-weight: 700;
  src: url('font_custom/SiemensSans_Prof_Bold.woff2') format('woff2'),
    url('font_custom/SiemensSans_Prof_Bold.woff') format('woff');
}

:root {

   /***** font *****/

   --root-font-ui: 'SiemensSans_Prof';

   --root-font-video: 'SiemensSans_Prof';

  --base-button-border-radius: 0.2rem;

  /***** color-shift *****/

  --root-color-shift-h: 240;

  --root-color-shift-s: 5%;

  /***** color-opacity *****/

  /* --root-opacity-low: 12%; */

  --root-opacity-medium: 24%;

  /* --root-opacity-high: 80%; */

  /***** primary color *****/

  --root-color-primary-h: 190;

  --root-color-primary-s: 100%;

  --root-color-primary-l: 31%;

  --color-primary: hsl(
    var(--root-color-primary-h),
    var(--root-color-primary-s),
    var(--root-color-primary-l)
  );

  --root-color-primary-interaction-h: 185;

  --root-color-primary-interaction-s: 62%;

  --root-color-primary-interaction-l: 25%;

  --color-primary-interaction: hsl(
    var(--root-color-primary-interaction-h),
    var(--root-color-primary-interaction-s),
    var(--root-color-primary-interaction-l)
  );

  --color-primary-opacity-low: hsla(
    var(--root-color-primary-h),
    var(--root-color-primary-s),
    var(--root-color-primary-l),
    var(--root-opacity-low)
  );

  --color-primary-opacity-medium: hsla(
    var(--root-color-primary-h),
    var(--root-color-primary-s),
    var(--root-color-primary-l),
    var(--root-opacity-medium)
  );

  /***** secondary color *****/

  --root-color-secondary-h: 180;

  --root-color-secondary-s: 100%;

  --root-color-secondary-l: 40%;

  --color-secondary: hsl(
    var(--root-color-secondary-h),
    var(--root-color-secondary-s),
    var(--root-color-secondary-l)
   );

  --root-color-secondary-interaction-h: 164;

  --root-color-secondary-interaction-s: 100%;

  --root-color-secondary-interaction-l: 50%;

  --color-secondary-interaction: hsl(
    var(--root-color-secondary-interaction-h),
    var(--root-color-secondary-interaction-s),
    var(--root-color-secondary-interaction-l)
  );

  --color-secondary-opacity-low: hsla(
    var(--root-color-secondary-h),
    var(--root-color-secondary-s),
    var(--root-color-secondary-l),
    var(--root-opacity-low)
  );

  --color-secondary-opacity-medium: hsla(
    var(--root-color-secondary-h),
    var(--root-color-secondary-s),
    var(--root-color-secondary-l),
    var(--root-opacity-medium)
  );

  /***** black and white *****/

 /***** deep blue *****/

  --root-color-black-h: 240;

  --root-color-black-s: 100%; 

  --root-color-black-l: 8%;

  --color-black: hsl(
    var(--root-color-black-h),
    var(--root-color-black-s),
    var(--root-color-black-l)
   );

  /***** color-gray *****/

  --color-gray-10: hsl(var(--root-color-shift-h), var(--root-color-shift-s), 10%);
  --color-gray-20: hsl(var(--root-color-shift-h), var(--root-color-shift-s), 20%);
  --color-gray-90: hsl(var(--root-color-shift-h), var(--root-color-shift-s), 90%);

  /* --color-gray-10-opacity-low: hsla(var(--root-color-shift-h), var(--root-color-shift-s), 10%, var(--root-opacity-low)) */

  /***** ansi-colors *****/

  /* --root-ansi-color-danger: #e00; */

  /* --root-ansi-color-danger-hover: #c00; */

  /* --root-ansi-color-warning: #ffa000; */

  /* --root-ansi-color-warning-hover: #e59000; */

  /* --root-ansi-color-caution: #fbff00; */

  /* --root-ansi-color-caution-hover: #d3d600; */

  /* --root-ansi-color-notice: #246cf3; */

  /* --root-ansi-color-notice-hover: #0c53da; */

  /***** base button vars *****/

  /* --base-button-font: var(--root-font-ui); */

  --base-button-fontweight: 700;

  /* --base-button-border-radius-normal: 0.25rem; */

  /* --base-button-border-radius-round: 25rem; */

  /* --base-button-elevation: 0 6px 10px rgba(0, 0, 0, 0.14),
    0 1px 18px rgba(0, 0, 0, 0.12), 0 3px 5px rgba(0, 0, 0, 0.2); */

  /***** base button variant one *****/

  /* --button-color-one-background: var(--color-primary); */

  /* --button-color-one-background-hover: var(--color-primary-interaction); */

  /* --button-color-one-text: var(--color-white); */

  /* --button-color-one-text-hover: var(--color-secondary); */

  /* --button-color-one-transparency: var(--color-primary-opacity-low); */

  /* --button-color-one-border: var(--color-primary); */

  /* --button-color-one-border-hover: var(--color-primary); */

  /***** base button variant two *****/

  --button-color-two-background: var(--color-secondary);

  --button-color-two-background-hover: var(--color-secondary-interaction);

  --button-color-two-text: var(--color-black);

  --button-color-two-text-hover: var(--color-black);

  --button-color-two-transparency: var(--color-secondary-opacity-low);

  --button-color-two-border: var(--color-secondary);

  --button-color-two-border-hover: var(--color-secondary);

  /***** base button variant black *****/

  /* --button-color-black-background: var(--color-gray-20); */

  /* --button-color-black-background-hover: var(--color-gray-30); */

  /* --button-color-black-text: var(--color-white); */

  /* --button-color-black-text-hover: var(--color-white); */

  /* --button-color-black-transparency: var(--color-gray-20-opacity-low); */

  /* --button-color-black-border: var((--color-gray-20); */

  /* --button-color-black-border-hover: var((--color-gray-20); */

  /***** base button variant white *****/

  /* --button-color-white-background: var(--color-white); */

  --button-color-white-background-hover: var(--color-secondary-interaction);

  --button-color-white-text: var(--color-black);

  --button-color-white-text-hover: var(--color-black);

  /* --button-color-white-transparency: var(--color-white-opacity-low); */

  /* --button-color-white-border: var((--color-white); */

  /* --button-color-white-border-hover: var((--color-gray-90); */

  /***** base button variant danger *****/

  /* --base-button-color-danger: var(--root-ansi-color-danger); */

  /* --base-button-color-danger-hover: var(--root-ansi-color-danger-hover); */

  /* --base-button-text-color-danger: var(--root-color-white); */

  /***** base button variant warning *****/

  /* --base-button-color-warning: var(--root-ansi-color-warning); */

  /* --base-button-color-warning-hover: var(--root-ansi-color-warning-hover); */

  /* --base-button-text-color-warning: var(--root-color-black); */

  /***** base button variant caution *****/

  /* --base-button-color-caution: var(--root-ansi-color-caution); */

  /* --base-button-color-caution-hover: var(--root-ansi-color-caution-hover); */

  /* --base-button-text-color-caution: var(--root-color-black); */

  /***** base button variant notice *****/

  /* --base-button-color-notice: var(--root-ansi-color-notice); */

  /* --base-button-color-notice-hover: var(--root-ansi-color-notice-hover); */

  /* --base-button-text-color-notice: var(--root-color-white); */

  /***** sidebar *****/

  /* --sidebar-background: var(--color-gray-10); */

  /* --sidebar-chapter-step-hover: var(--color-secondary-opacity-low); */

  /* --sidebar-chapter-step-active: var(--color-secondary-opacity-low); */

  /* --sidebar-slider-marker: var(--color-secondary); */

  /* --sidebar-card-icon: var(--color-secondary); */

  /* --sidebar-card-hover: var(--color-secondary-opacity-low); */

  /* --sidebar-entry-icon: var(--color-secondary); */

  /* --sidebar-entry-hover: var(--color-secondary-opacity-low); */


  /***** spinner *****/

  --spinner-color: var(--color-primary);

  /***** progressbar *****/

  --progressbar-full: var(--color-white-opacity-medium);

  --progressbar-progress: var(--color-primary);

  --progressbar-scrubber: var(--color-primary);

  --progressbar-scrubber-drag: var(--color-primary-opacity-medium);

  --progressbar-marker: var(--color-gray-90);

  --progressbar-step: var(--color-gray-90);

  --progressbar-step-current: var(--color-primary);

  /***** intro *****/

  /* --intro-color-light-text: var(--color-gray-10); */

  /* --intro-color-light-background: var(--color-black); */

  /* --intro-color-dark-text: var(--color-white); */

  /* --intro-color-dark-background: var(--color-black); */

    /***** label *****/

  --label-color-dark-background: var(--color-black);

	/* --label-color-dark-background-transparency: hsla(210, 5%, 10%, 0.85); */

	/* --label-color-dark-text: var(--color-white); */

	/* --label-color-dark-highlight: var(--color-secondary); */

	/* --label-color-light-background:  var(--color-white); */

	/* --label-color-light-background-transparency: hsla(0, 0%, 100%, 0.85); */

	/* --label-color-light-text: var(--gray-10); */

	/* --label-color-light-highlight: var(--color-primary); */
}