/*
--0: 0rem;              /	 0 		/
--1: 0.25rem;           / 	4px 	/
--2: 0.5rem;            / 	8px 	/
--3: 0.75rem;           / 	12px 	/
--4: 1rem;              / 	16px 	/
--5: 1.25rem;           / 	20px 	/
--6: 1.5rem;            / 	24px 	/
--7: 2rem;              / 	32px 	/
--8: 2.5rem;            / 	40px 	/
--9: 3rem;              / 	48px 	/
--10: 3.5rem;           / 	56px 	/
--11: 4rem;             / 	64px 	/
--12: 5rem;             / 	80px 	/
--13: 6rem;             / 	96px 	/
--14: 7rem;             / 	112px 	/
--15: 8rem;             / 	128px 	/
--16: 9rem;             / 	144px 	/
*/

/* ______________________________________________ Variáveis de widget ______________________________________________ */

/* ______ Imagem ______ */

:root {
	/* image-radius */
	--image-radius-0: 0rem;
	--image-radius-1: 0.5rem;
	--image-radius-2: 1.25rem;
	--image-radius-3: 2.5rem;
	--image-radius-4: 3rem;

	--aspect-ratio-0: 1/1;
	--aspect-ratio-1: 16/9;
	--aspect-ratio-2: 9/16;
	--aspect-ratio-3: 4/3;
	--aspect-ratio-4: 3/4;

	/* widget-radius */
	--widget-radius-0: 0rem;
	--widget-radius-1: 0.5rem;
	--widget-radius-2: 1.25rem;
	--widget-radius-3: 2.5rem;
	--widget-radius-4: 3rem;

	/* image-fit */
	--image-fit-0: cover;
	--image-fit-1: contain;

	/* image-align */
	--image-align-0: flex-start;
	--image-align-1: center;
	--image-align-2: flex-end;

	/* object-align */
	--object-align-0: flex-start;
	--object-align-1: center;
	--object-align-2: flex-end;

	/* text-align */
	--text-align-0: left;
	--text-align-1: center;
	--text-align-2: right;

	/* new-tab */
	--new-tab-0: 0;
	--new-tab-1: 1;

	/* title-family text-family */
	--font-family-0: "Inter", sans-serif;
	--font-family-1: "Gentium Plus", serif;
	--font-family-2: "Dancing Script", cursive;

	/* background-expand */
	/* --background-expand-0: bg-contained;
	--background-expand-1: bg-expanded; */

	/* widget-spacing */
	--widget-spacing-0: 0;
	--widget-spacing-1: 1.25rem;
	--widget-spacing-2: 3rem;
	--widget-spacing-3: 5rem;

	/* shadow */
	--shadow-0: none;
	--shadow-1: 0px 2px 4px -1px rgba(0, 0, 0, 0.06), 0px 4px 6px -1px rgba(0, 0, 0, 0.10);
	--shadow-2:  0px 4px 6px -2px rgba(0, 0, 0, 0.05), 0px 10px 15px -3px rgba(0, 0, 0, 0.10);
	--shadow-3: 0px 25px 50px -12px rgba(0, 0, 0, 0.25);

	/* text-shadow */
	--text-shadow-0: none;
	--text-shadow-1:  0.05em 0.05em 0.2em rgba(0, 0, 0, 0.6);
	--text-shadow-2:  -1px 0 rgba(0, 0, 0, 0.4), 0 1px rgba(0, 0, 0, 0.4), 1px 0 rgba(0, 0, 0, 0.4), 0 -1px rgba(0, 0, 0, 0.4);

	/* icon-size */
	--icon-size-0: 24px;
	--icon-size-1: 32px;
	--icon-size-2: 40px;

	/* icon-radius */
	--icon-radius-0: 0;
	--icon-radius-1: var(--5);
	--icon-radius-2: 500%;

}



/* _______________________________ Tamanho de texto _______________________________ */
/* Usando Escala Modular (1.5) */

/* telas grandes  */
@media screen and (min-width: 1440px) {
	:root {
		--w_h1: 4.5rem;
		--w_h2: 3rem;
		--w_h3: 2.5rem;
		--w_h4: 2rem;
		--w_h5: 1.5rem;
		--w_h6: 1.25rem;

		--w_p-l: 2rem;
		--w_p-m: 1.5rem;
		--w_p-s: 1.25rem;

		--w-btn-font-size: 1.5rem;
	}
}
/* Laptop  */
@media screen and (max-width: 1440px) {
	:root {
		--w_h1: 3rem;
		--w_h2: 2rem;
		--w_h3: 1.75rem;
		--w_h4: 1.5rem;
		--w_h5: 1.25rem;
		--w_h6: 1rem;

		--w_p-l: 1.5rem;
		--w_p-m: 1.125rem;
		--w_p-s: 1rem;

		--w-btn-font-size: 1.125rem;
	}
}
/* tablet  */
@media screen and (max-width: 800px) {
	:root {
		--w_h1: 2.5rem;
		--w_h2: 1.75rem;
		--w_h3: 1.5rem;
		--w_h4: 1.25rem;
		--w_h5: 1rem;
		--w_h6: 0.875rem;

		--w_p-l: 1.25rem;
		--w_p-m: 1rem;
		--w_p-s: 0.875rem;

		--w-btn-font-size: 1rem;
	}
}

/* mobile */
@media screen and (max-width: 700px) {
	:root {
		--w_h1: 2rem;
		--w_h2: 1.5rem;
		--w_h3: 1.125rem;
		--w_h4: 1rem;
		--w_h5: 0.87rem;
		--w_h6: 0.75rem;

		--w_p-l: 1rem;
		--w_p-m: 0.875rem;
		--w_p-s: 0.75rem;

		--w-btn-font-size: rem;
	}
}



/* _______________________________ Tamanho de texto _______________________________ */

:root{
	/* title-size */
		--title-size-0: var(--w_h3);
		--title-size-1: var(--w_h2);
		--title-size-2: var(--w_h1);

		/* text-size */
		--text-size-0: var(--w_p-s);
		--text-size-1: var(--w_p-m);
		--text-size-2: var(--w_p-l);

	}


	/*_______________________________ button style _______________________________*/

	/*
		btn azul  - 		w_btn-blue
		btn verde - 		w_btn-green
		btn vermelho - 		w_btn-red
		btn amarelo - 		w_btn-yellow
		btn cinza - 		w_btn-gray
		btn pink - 			w_btn-pink
			btn purple - 	w_btn-purple
	*/



/* variáveis dos botões */
	:root{
		--w-btn-border-radius:  var(--2);
		--w-btn-font-weight: var(--semibold);
	}

	button:focus-visible{
		outline-color: var(--blue-500);
		outline-style: solid;
		outline-width: 2px;
		outline-offset: 4px;
		border-radius: 2px;
	}


/* base do botão */
	.w_btn{
		padding-block: var(--3);
		padding-inline: var(--6);
		width: fit-content;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: var(--w-btn-border-radius);
		font-weight: var(--w-btn-font-weight);
		font-size: var(--w-btn-font-size);
		transition: all ease-in 100ms;
		user-select: none;
		text-align: center;
		background-color: var(--gray-100);
		color: var(--gray-700);
		line-height: 1;
		text-decoration: none;
	}

	.w_btn:hover{
		transform: translateY(-1px) scale(1.02);
		box-shadow: var(--shadow-sm);
	}

	.w_btn:active{
		transform: scale(0.98);
		box-shadow: var(--inner-shadow);
	}


	.w_btn:focus-visible{
		outline-color: var(--blue-500);
		outline-style: solid;
		outline-width: 2px;
		outline-offset: 4px;
		border-radius: 2px;
	}

	/* btn disabled */

	.w_btn:disabled{
		background-color: var(--gray-300);
		color: var(--gray-500);
	}

	.w_btn:disabled:hover{
		transform: translateY(0) scale(1);
		box-shadow: none;
		cursor: not-allowed;
	}

/* ___________________________________________ Cores dos botões ___________________________________________ */

	/* btn azul */
	.w_btn-blue{
		color: white !important;
		background-color: var(--blue-600);
	}

	.w_btn-blue:active{
		color: white !important;
		background-color: var(--blue-700);
	}

	/* btn verde */
	.w_btn-green{
		color: white !important;
		background-color: var(--green-600);
	}

	.w_btn-green:active{
		color: white !important;
		background-color: var(--green-700);
	}

	/* btn vermelho */
	.w_btn-red{
		color: white !important;
		background-color: var(--red-600);
	}

	.w_btn-red:active{
		color: white !important;
		background-color: var(--red-700);
	}


	/* btn amarelo */
	.w_btn-yellow{
		color: white !important;
		background-color: var(--yellow-600);
	}

	.w_btn-yellow:active{
		color: white !important;
		background-color: var(--yellow-700);
	}


	/* btn cinza */
	.w_btn-gray{
		color: white !important;
		background-color: var(--gray-600);
	}

	.w_btn-gray:active{
		color: white !important;
		background-color: var(--gray-700);
	}

	/* btn pink */
	.w_btn-pink{
		color: white !important;
		background-color: var(--pink-600);
	}

	.w_btn-pink:active{
		color: white !important;
		background-color: var(--pink-700);
	}

	/* btn purple */
	.w_btn-purple{
		color: white !important;
		background-color: var(--purple-600);
	}

	.w_btn-purple:active{
		color: white !important;
		background-color: var(--purple-700);
	}