html{
  --black-900: #262628;
  --black-800: #353940;
  --black-700: #656A73;
  --black-600: #989DA5;
  --black-500: #B3B8BF;
  --black-400: #D0D3D8;
  --white-300: #E3E5E8;
  --white-200: #EDEFF2;
  --white-100: #F7F9FA;
  --white-50: #FFFFFF;
  --white-true: #FFFFFF;
  --blue-900: #00305C;
  --blue-600: #0070D6;
  --blue-500: #0085FF;
  --blue-400: #2E9BFF;
  --blue-200: #B7DDFF;
  --blue-100: #E5F3FF;
  --blue-select: #EFF3FF;
  --blue-disabled: #98BCDE;
  --yellow-900: #5C4200;
  --yellow-600: #D69900;
  --yellow-500: #FFB703;
  --yellow-400: #FFC430;
  --yellow-200: #FFEBB8;
  --yellow-100: #FFF8E6;
  --yellow-disabled: #D8C99F;
  --red-900: #881414;
  --red-600: #ED1515;
  --red-500: #FF4141;
  --red-400: #FF6464;
  --red-100: #FFF1F1;
  --green-900: #006241;
  --green-600: #0FB47C;
  --green-500: #25DD9F;
  --green-400: #A7FFE1;
  --green-100: #ECFFF8;
  --purple-900: #4D1A98;
  --purple-600: #7D36F1;
  --purple-500: #8149F9;
  --purple-400: #A888FD;
  --purple-100: #F5F3FF;
}
:root {
  --pf-c-alert--m-inline--BackgroundColor:transparent;
  --default-text-color: var(--black-900);
  --default-white-text-color: var(--white-50);
  --empty-field-color: var(--black-700);
  --disabled-field-color: var(--black-500);
  --separator-line-color: var(--black-400);
  --menu-background-color: var(--white-200);
  --panel-background-color: var(--white-100);
  --default-negative-color: var(--red-500);
  --default-positive-color: var(--green-500);
  --default-no-info-color: var(--purple-500);
  --vaadin-input-field-hover-highlight: var(--white-50);
  --default-empty-component-border-color: var(--black-700);
  --default-component-border-color: var(--black-900);
  --default-component-label-color: var(--black-700);
  --default-component-input-field-background-color: var(--white-50);
  --default-label-background-color: var(--default-component-input-field-background-color);
  --vaadin-text-field-label-cursor: text;
  --default-combobox-select-color: var(--blue-select);
  --panel-background-secondary-color: var(--white-true);
  --default-primary-color: var(--blue-500);
  --default-secondary-color: var(--yellow-500);
  --button-primary-hover-color: var(--blue-600);
  --button-primary-disabled-color: var(--blue-disabled);
  --button-secondary-hover-color: var(--yellow-600);
  --button-secondary-disabled-color: var(--yellow-disabled);
  --button-focus-border-color: var(--black-400);
  --disabled-step-color: var(--black-700);
  --footer-text-color: var(--black-700);
  --lumo-contrast-30pct: hsla(214, 50%, 22%, 0.26)
}

/*//w przyszłości kolory dark mode*/
[theme="dark"] {
}
body{
  color:var(--default-text-color);
}