:root {
  // --def-primary-ft: rgb(32, 31, 29);
  --def-primary-ft: rgb(32 31 29);
  --def-primary-bg: rgb(255 255 255 / 100%);
  --def-box-padding: 0.5rem;
  --def-contrast-bg: rgb(241 245 243);
  --def-contrast-ft: rgb(88 90 89);
  --def-button-bg: rgb(250 0 135);
  --def-button-ft: rgb(253 253 253);
  --def-button-hov-bg: rgb(135 118 232);
  --def-button-hov-ft: rgb(255 255 255);
  --def-link-ft: rgb(250 0 135);

  // variables to use in code
  --res-primary-ft: var(--primary-ft, var(--res-primary-ft));
  --res-primary-bg: var(--primary-bg, var(--def-primary-bg));
  --res-box-padding: var(--box-padding, var(--def-box-padding));
  --res-contrast-bg: var(--contrast-bg, var(--def-contrast-bg));
  --res-contrast-ft: var(--contrast-ft, var(--def-contrast-ft));
  --res-button-bg: var(--button-bg, var(--def-button-bg));
  --res-button-ft: var(--button-ft, var(--def-button-ft));
  --res-button-hov-bg: var(--button-hov-bg, var(--def-button-hov-bg));
  --res-button-hov-ft: var(--button-hov-ft, var(--def-button-hov-ft));
  --res-link-ft: var(--link-ft, var(--def-link-ft));
}