:root {
/* systems fonts: windows (Segoe), apple (macOS, iOS), linux (Roboto), fallback (sans-serif) */
	--ff-primary: 'Segoe UI', 'Segoe UI Emoji', 'Segoe UI Symbol', -apple-system, BlinkMacSystemFont, 'Apple Color Emoji', Roboto, sans-serif;
	--fs-primary: clamp(1rem, 2vw + .25rem, 1.125rem);
	--lh-primary: 1.4;
	--lh-secondary: 1.1;

/* defaults */
	--fw-x-light: 100;
	--fw-light: 200;
	--fw-lighter: 300;
	--fw-normal: 400;
	--fw-bolder: 600;
	--fw-semibold: 600;
	--fw-bold: 700;
	--fw-x-bold: 800;
	--fw-heavy: 900;
	--fw-x-black: 950;

	--fs-100: .5625em;
	--fs-200: .625em;
	--fs-300: .8125em;
	--fs-350: .9em;
	--fs-400: 1em;
	--fs-450: 1.1em;
	--fs-500: 1.125em;
	--fs-600: 1.5em;
	--fs-700: 2em;
	--fs-900: 3em;

	--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);
	--fs-xxx-large: var(--fs-900);

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

	--ui-color-positive: hsl(160, 100%, 30%);
	--ui-background-positive: hsl(134, 60%, 50%);
	--ui-color-negative: hsl(0, 85%, 40%);
	--ui-background-negative: hsl(0, 60%, 50%);

	--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);

	--header-background: var(--clr-100);
	--header-color: inherit;
	--main-background: var(--clr-100);
	--main-color: inherit;
	--footer-background: var(--clr-100);
	--footer-color: inherit;

	/* used in homepages list */
	/*
	--color-brand: hsl(196, 88%, 56%); #2dbdf2
	--color-brand-primary: hsl(60, 1%, 61%); #9d9d9c
	--color-brand-accent: hsl(0, 0%, 33%); #545454
	--color-brand-alt: hsl(196, 88%, 40%);
	*/
	--color-brand: hsl(212, 84%, 46%);
	--color-brand-on: var(--clr-100);
	--color-brand-alt: hsl(212, 84%, 54%);
	--color-brand-alt-on: var(--clr-100);
	--color-brand-primary: var(--clr-300);
	--color-brand-accent: var(--clr-400);

	/* menus */
	--color-menu: var(--clr-300);
	--color-menu-hovered: var(--clr-700);
	--color-menu-selected: var(--color-brand);
	--color-menu-selected-hovered: var(--color-brand-alt);

	--color-mobile-menu: var(--clr-200);
	--color-mobile-menu-hovered: var(--clr-100);
	--color-mobile-menu-selected: var(--clr-150);
	--color-mobile-menu-selected-hovered: var(--clr-100);
	--background-mobile-menu: hsla(0, 0%, 0%, .95);
	--background-mobile-menu-hovered: var(--clr-200);
	--background-mobile-menu-selected: var(--color-brand);
	--background-mobile-menu-selected-hovered: var(--color-brand-alt);

	--color-sub-menu: var(--clr-150);
	--color-sub-menu-hovered: var(--clr-100);
	--color-sub-menu-selected: var(--clr-100);
	--color-sub-menu-selected-hovered: var(--clr-100);
	--background-sub-menu: var(--clr-400);
	--background-sub-menu-hovered: var(--clr-300);
	--background-sub-menu-selected: var(--color-brand);
	--background-sub-menu-selected-hovered: var(--color-brand-alt);

	--color-local-menu: var(--clr-400);
	--color-local-menu-hovered: var(--clr-700);
	--color-local-menu-selected: var(--color-brand);
	--color-local-menu-selected-hovered: var(--color-brand-alt);
	--background-local-menu: hsla(0, 0%, 0%, .05);
	--background-local-menu-selected: var(--clr-100);

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

	--header-height: 3.75rem;
	--header-padding-block: 1px;
	--header-outter-height: calc(var(--header-height) + var(--header-padding-block) * 2);
	--header-logo-width: 120px;

	--footer-height: 2rem;

	/* page limits */
	--min-vw: 320px;
	--max-vw: 1440px;
	--max-vw-admin: 1710px; /*calc(var(--max-vw) + ((1980px - var(--max-vw)) / 2)) = calc((var(--max-vw) + 1980px) / 2) */

	/* items list */
	--color-items-background: var(--color-background);
	--color-items-primary: var(--color-primary);
	--color-items-accent: var(--color-accent);
	--mosaic-min-width: 32ch;

	/* inputs */
	--input-max-width: 80ch;
	--input-wide-max-width: 60ch;
	--input-narrow-max-width: 40ch;
	--input-narrower-max-width: 30ch;
}