:root {
  // base color e.g. #17541f = hsl(128, 57%, 21%)
  --pngx-primary: 128, 57%;
  --pngx-primary-lightness: 21%;
  --pngx-primary-text-contrast: var(--bs-light);

  --bs-primary: hsl(var(--pngx-primary), var(--pngx-primary-lightness));
  --bs-border-color: var(--bs-gray-400);
  --pngx-primary-faded: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) + 72%));
  --pngx-primary-lighten-10: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) + 10%));
  --pngx-primary-lighten-30: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) + 30%));
  --pngx-primary-darken-10: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 10%));
  --pngx-primary-darken-15: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 15%));
  --pngx-primary-darken-18: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 18%));
  --pngx-bg-darker: var(--bs-gray-100);
  --pngx-focus-alpha: 0.3;
}