:root {

  // Default blueish HUE used for surfaces, text, buttons and more
  --hue: 210;

  // assign HSL (hue, saturation, lightness) primary vars here for all three themes
  --hsl-primary-dark: var(--hue) 50% 45%;
  --hsl-primary-contrast: var(--hue) 45% 50%;
  --hsl-primary-light: var(--hue) 55% 55%;
}

:root {
	--popup-bg: #000;
	--popup-placeholder-bg: #222;
	--popup-timer-color: white;
	--popup-caption-max-width: 640px;
	--popup-caption-font-size: .9rem;
	--popup-caption-font-weight: 300;
	--popup-caption-line-height: 135%;
	--popup-caption-color
	--popup-caption-item-space: .35em;
	--popup-caption-line-clamp: 3;
	--files-data-top: 0;
	--files-data-display: none;
	--files-data-display-hover: block;
	--files-data-animation: opacity .2s;
	--grid-height: 100%;
	--grid-font-size: 14px;
	--list-max-width: 1040px;
	--rows-height: auto;
	--rows-justify-content: space-evenly;
	--rows-flex-grow: 1;
	--sidebar-width: calc(10vw + 180px);
	--sidebar-width-small: 85vw;
	--sidebar-width-hover: 480px;
	--menu-font-size: 16px;
	--menu-line-height: 30px;
	--menu-folder-icon-size: 22px;
	--menu-text-indent: 6px;
	--menu-icon-toggle-opacity: 0;
}

