/*----------------------------------------------------------------- */
/* VARIABLES / CUSTOM PROPERTIES
/*----------------------------------------------------------------- */

:root,
html[data-theme='light']
{
	/* COLORS
	----------------------------------------- */
	--color__body-bg: #f3f4f4;
	--color__content-bg: #fff;
	--color__content-heading: #516377;
	--color__content-text: #677788;
	--color__form-border: #d4d8dd;
	--color__form-placeholder: #a8b1bb;
	--color__form-bg-extra: #f9f9f9;
	--color__menu-line: #d4d8dd;
	--color__menu-links: #677788;
	--color__menu-links-active: #5a8dee;
	--color__menu-links-bg: #dbe4f3;
	--color__menu-links-hover: rgba(38,60,85,0.04);
	--color__menu-scroll: rgba(90,141,238,0.2);
	--color__menu-sub-bg: #eceded;
	--color__menu-sub-dot: #a8b1bb;
	--color__alert_general-bg: #e5edfc;
	--color__alert_general-border: #ceddfa;
	--color__alert_success-bg: #dff9ec;
	--color__alert_success-border: #c4f4dc;
	--color__alert_warning-bg: #fff2e1;
	--color__alert_warning-border: #fee6c6;
	--color__alert_danger-bg: #ffe5e5;
	--color__alert_danger-border: #ffcece;
	--color__alert_info-bg: #d6f7fa;
	--color__alert_info-border: #b3f1f5;
	--color__alert_dark-bg: #e2e4e6;
	--color__alert_dark-border: #c8ccd0;
}

:root,
html[data-theme='dark']
{
	/* COLORS
	----------------------------------------- */
	--color__body-bg: #1c222f;
	--color__content-bg: #283144;
	--color__content-heading: #d8deea;
	--color__content-text: #a1b0cb;
	--color__form-border: #546990;
	--color__form-placeholder: #8295ba;
	--color__form-bg-extra: #212734;
	--color__menu-line: #36445d;
	--color__menu-links: #a1b0cb;
	--color__menu-links-active: #fff;
	--color__menu-links-bg: #5a8dee;
	--color__menu-links-hover: #2e3440;
	--color__menu-scroll: rgba(255,255,255,0.5);
	--color__menu-sub-bg: #252b37;
	--color__menu-sub-dot: #a1b0cb;
	--color__alert_general-bg: #30405f;
	--color__alert_general-border: #374d77;
	--color__alert_success-bg: #2b4c4f;
	--color__alert_success-border: #2d6459;
	--color__alert_warning-bg: #4a4544;
	--color__alert_warning-border: #685643;
	--color__alert_danger-bg: #4a3848;
	--color__alert_danger-border: #693e4b;
	--color__alert_info-bg: #224a5c;
	--color__alert_info-border: #1c6072;
	--color__alert_dark-bg: #4a5262;
	--color__alert_dark-border: #696f7c;
}

:root
{
	/* COLORS
	----------------------------------------- */
	--color__black: #000;
	--color__dark: #495563;
	--color__dark-light: #717784;
	--color__blue: #5a8dee;
	--color__blue_rgb: 90,141,238;
	--color__blue-dark: #69809a;
	--color__blue-light: #6b98f0;
	--color__blue-lightest: #00cfdd;
	--color__green: #39da8a;
	--color__orange: #fd7e14;
	--color__red: #ff5b5c;
	--color__white: #fff;
	--color__yellow: #fdac41;
	--color__extra-bg: rgba(99, 123, 169, 0.06);

	/* FONTS
	----------------------------------------- */
	--font-family__default: 'IBM Plex Sans', sans-serif;
	--font-family__heading: 'Rubik', sans-serif;
	--font-size__rem-constant: 62.5%;
	--font-size__default: 1.6rem;
	--font-size__h1: clamp(3rem, 3.8vw, 3.8rem);
	--font-size__h2: clamp(2.6rem, 3.2vw, 3.2rem);
	--font-size__h3: clamp(2.2rem, 2.6vw, 2.6rem);
	--font-size__h4: clamp(2rem, 2.2vw, 2.2rem);
	--font-size__big: 1.8rem;
	--font-size__small: 1.5rem;
	--font-size__small-extra: 1.2rem;
	--font-weight__bold: 600;
	--font-weight__medium: 500;
	--font-weight__normal: 400;
	--line-height__default: 2.2rem;

	/* HEADER
	----------------------------------------- */
	--toolbar__height: 60px;

	/* PADDINGS | MARGINS | BORDERS
	----------------------------------------- */
	--padding__big: 60px;
	--padding__default: 40px;

	/* ANIMATIONS
	----------------------------------------- */
	--transition-duration__default: 0.5s;
	
	/* LAYOUT
	----------------------------------------- */
	--width__website: 1920px;
	--width__layout: 1380px;
	--width__content: 960px;
	--width__sidebar: 260px;
	--width__toolbar: calc(100% - var(--width__sidebar));

	/* OTHERS
	----------------------------------------- */
	--js__scroll-gap: 100;
}

@media (max-width: 1280px)
{
	:root
	{
		/* HEADER
		----------------------------------------- */
		--toolbar__height: 50px;

		/* OTHERS
		----------------------------------------- */
		--js__scroll-gap: 90;
	}
}

@media (max-width: 760px)
{
	:root
	{
		/* PADDINGS | MARGINS | BORDERS
		----------------------------------------- */
		--padding__big: 30px;
		--padding__default: 20px;

		/* OTHERS
		----------------------------------------- */
		--js__scroll-gap: 70;
	}
}