:root {
/* defaults */
	--ff-primary: Arial, Verdana, Helvetica, sans-serif;

	--fw-light: 300;
	--fw-normal: normal;
	--fw-semibold: 600;
	--fw-bold: bold;
	--fw-x-bold: 800;

	--fs-100: .67em;
	--fs-200: .75em;
	--fs-300: .83em;
	--fs-350: .90em;
	--fs-400: 1em;
	--fs-450: 1.1em;
	--fs-500: 1.17em;
	--fs-600: 1.5em;
	--fs-700: 2em;

	--fs-xx-small: var(--fs-100);
	--fs-x-small: var(--fs-200);
	--fs-small: var(--fs-300);
	--fs-smaller: var(--fs-350);
	--fs-medium: var(--fs-400);
	--fs-larger: var(--fs-450);
	--fs-large: var(--fs-500);
	--fs-x-large: var(--fs-600);
	--fs-xx-large: var(--fs-700);

	--ui-color: #d0d0bf;
	--ui-color-accent: #666;
	--ui-color-shade: #f0f0ef;

	--ui-border-radius: .25rem;
	--ui-border: 1px solid var(--ui-color);
	--ui-outline: 1px solid var(--ui-color-accent);
	--ui-outline-offset: 1px;

/* headers */
	--clr-100: #fff;
	--clr-150: #eee;
	--clr-200: #999;
	--clr-300: #666;
	--clr-400: #333;
	--clr-700: #000;

	--color-background: var(--clr-100);
	--color-background-accent: var(--ui-color-shade);
	--color-primary: var(--clr-400);
	--color-accent: var(--clr-700);

	/* items list */
	--color-items-background: var(--color-background);
	--color-items-primary: var(--color-primary);
	--color-items-accent: var(--color-accent);

	/* used in homepages list */
	--color-brand: hsl(196, 88%, 56%); /* #2dbdf2 */
	--color-brand-on: var(--clr-100);

	--color-brand-alt: hsl(196, 88%, 40%);
	--color-brand-alt-on: var(--clr-100);

	--color-brand-primary: hsl(60, 1%, 61%); /* #9d9d9c */
	--color-brand-accent: hsl(0, 0%, 33%); /* #545454 */

	--color-mobile-menu: hsla(0, 0%, 0%, .95);
	--color-mobile-text: var(--color-brand-on);

	--color-submenu-background: var(--color-brand-primary);
	--color-submenu-text: var(--color-brand-on);

	--color-localmenu-background: var(--ui-color-shade);

	--logo-brand: url('imgs/logo-name.png');
	--logo-brand-small: url('imgs/logo.png');

	--header-height: 3.75rem;
	--footer-height: 2rem;

	--min-vw: 320px;
	--max-vw: 1440px;

	--mosaic-min-width: 30ch;
}