/* ______________________________________________ Variáveis de widget ______________________________________________ */


/* ______ Spacing ______ */
:root {
    --s-0: 0rem;              /* 0 */
    --s-1: 0.25rem;           /* 4px */
    --s-2: 0.5rem;            /* 8px */
    --s-3: 0.75rem;           /* 12px */
    --s-4: 1rem;              /* 16px */
    --s-5: 1.25rem;           /* 20px */
    --s-6: 1.5rem;            /* 24px */
    --s-7: 2rem;              /* 32px */
    --s-8: 2.5rem;            /* 40px */
    --s-9: 3rem;              /* 48px */
    --s-10: 3.5rem;           /* 56px */
    --s-11: 4rem;             /* 64px */
    --s-12: 5rem;             /* 80px */
    --s-13: 6rem;             /* 96px */
    --s-14: 7rem;             /* 112px */
    --s-15: 8rem;             /* 128px */
    --s-16: 9rem;             /* 144px */
    --s-17: 10rem;            /* 160px */
    --s-18: 11rem;            /* 176px */
    --s-19: 12rem;            /* 192px */
    --s-20: 12.5rem;          /* 200px */
}

@media screen and (max-width: 800px) { /* Tablet - aproximadamente 75% */
    :root {
        --s-0: 0rem;          /* 0px */
        --s-1: 0.25rem;       /* 4px */
        --s-2: 0.5rem;        /* 8px */
        --s-3: 0.75rem;       /* 12px */
        --s-4: 0.75rem;       /* 12px */
        --s-5: 1rem;          /* 16px */
        --s-6: 1.25rem;       /* 20px */
        --s-7: 1.5rem;        /* 24px */
        --s-8: 1.75rem;       /* 28px */
        --s-9: 2rem;          /* 32px */
        --s-10: 2.5rem;       /* 40px */
        --s-11: 2.75rem;      /* 44px */
        --s-12: 3.5rem;       /* 56px */
        --s-13: 4rem;         /* 64px */
        --s-14: 4.75rem;      /* 76px */
        --s-15: 5.5rem;       /* 88px */
        --s-16: 6rem;         /* 96px */
        --s-17: 6.75rem;      /* 108px */
        --s-18: 7.5rem;       /* 120px */
        --s-19: 8rem;         /* 128px */
        --s-20: 8.75rem;      /* 140px */
    }
}

@media screen and (max-width: 700px) { /* Mobile - aproximadamente 50% */
    :root {
        --s-0: 0rem;          /* 0px */
        --s-1: 0.25rem;       /* 4px */
        --s-2: 0.5rem;        /* 8px */
        --s-3: 0.5rem;        /* 8px */
        --s-4: 0.5rem;        /* 8px */
        --s-5: 0.75rem;       /* 12px */
        --s-6: 1rem;          /* 16px */
        --s-7: 1rem;          /* 16px */
        --s-8: 1.25rem;       /* 20px */
        --s-9: 1.5rem;        /* 24px */
        --s-10: 1.75rem;      /* 28px */
        --s-11: 1.75rem;      /* 28px */
        --s-12: 2rem;         /* 32px */
        --s-13: 2.25rem;      /* 36px */
        --s-14: 2.5rem;       /* 40px */
        --s-15: 2.5rem;       /* 40px */
        --s-16: 2.75rem;      /* 44px */
        --s-17: 3rem;         /* 48px */
        --s-18: 3.25rem;      /* 52px */
        --s-19: 3.5rem;       /* 56px */
        --s-20: 3.75rem;      /* 60px */
    }
}

/* ______ 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: 100%;

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

	/* btn-radius */
	--btn-radius-0: 0rem;
	--btn-radius-1: 0.5rem;
	--btn-radius-2: 1.25rem;
	--btn-radius-3: 50rem;

	/* 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 !important;
	--font-family-1: "Gentium Plus", serif !important;
	--font-family-2: "Dancing Script", cursive !important;
	--font-family-3: 'Poppins', sans-serif !important;

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

	/* 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%;

	/* font-weight */
	--font-weight-0: 300;
	--font-weight-1: 400;
	--font-weight-2: 500;
	--font-weight-3: 600;
	--font-weight-4: 700;


	/*flex-direction*/
	--flex-direction-0: row;
	--flex-direction-1: column;

	/*row-direction*/
	--row-direction-0: row;
	--row-direction-1: row-reverse;
}



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


/* Laptop  */

:root {
	--w_h1: 7.993rem;
	--w_h2: 5.653rem;
	--w_h3: 3.998rem;
	--w_h4: 2.827rem;
	--w_h5: 1.999rem;
	--w_h6: 1.414rem;
	--w_p: 1rem;
	--w_small: 0.707rem;
}

/* TODO :: Query intermediária */

/* Laptops */
@media (max-width: 1024px) {
    :root {
        --w_h1: 6rem;
        --w_h2: 4.5rem;
        --w_h3: 3.2rem;
        --w_h4: 2.4rem;
        --w_h5: 1.8rem;
        --w_h6: 1.3rem;
        --w_p: 0.9rem;
        --w_small: 0.65rem;
    }
}

/* Tablets */
@media (max-width: 800px) {
    :root {
        --w_h1: 6rem;
        --w_h2: 4.5rem;
        --w_h3: 3.2rem;
        --w_h4: 2.4rem;
        --w_h5: 1.8rem;
        --w_h6: 1.3rem;
        --w_p: 0.9rem;
        --w_small: 0.65rem;
    }
}

/* mobile */
@media screen and (max-width: 500px) {
	:root {
		--w_h1: 4.5rem;
        --w_h2: 3.5rem;
        --w_h3: 2.8rem;
        --w_h4: 2rem;
        --w_h5: 1.5rem;
        --w_h6: 1.2rem;
        --w_p: 0.875rem;
        --w_small: 0.6rem;
	}
}



/* _______________________________ Tamanho de texto _______________________________ */

:root{
	/* Text-size */
		--text-size-1: var(--w_small);
		--text-size-2: var(--w_p);
		--text-size-3: var(--w_h6);
		--text-size-4: var(--w_h5);
		--text-size-5: var(--w_h4);
		--text-size-6: var(--w_h3);
		--text-size-7: var(--w_h2);
		--text-size-8: var(--w_h1);

		/* p = 2 */

	}


	/*_______________________________ 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-block: 1em;
		padding-inline: 2em;
		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-color: currentColor;
		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;
	}

	/* Btn com icone */

	.w_btn-icon{
		width: max-content !important;
		display: flex;
		align-items: center;
		gap: var(--2);
		font-size: inherit;
	}

	.w_b-icon{
		height: 1.15em;
		display: flex;
		width: fit-content;
	}

	.w_b-icon > *{
		height: 100%;
		width: 100%;
	}


/* ___________________________________________ 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);
	}





	/* ____Legado___ */


/* telas grandes  */
/* @media screen and (min-width: 2000px) {
	:root {
		--w_h0: 7rem;
		--w_h1: 6.125rem;
		--w_h2: 4.625rem;
		--w_h3: 3.5rem;
		--w_h4: 2.625rem;
		--w_h5: 1.5rem;
		--w_h6: 1.25rem;
		--w_small: 1rem;
	}
}
/* Laptop  */
/* @media screen and (min-width: 1440px) {
	:root {
		--w_h0: 6rem;
		--w_h1: 5.25rem;
		--w_h2: 3.9375rem;
		--w_h3: 3rem;
		--w_h4: 2.25rem;
		--w_h5: 1.25rem;
		--w_h6: 1rem;
		--w_small: 0.87rem;
	}
} */
/* tablet  */
 /* @media screen and (max-width: 800px) {
	:root {
		--w_h0: 3.75rem;
		--w_h1: 2.5rem;
		--w_h2: 1.75rem;
		--w_h3: 1.5rem;
		--w_h4: 1.25rem;
		--w_h5: 1rem;
		--w_h6: 0.875rem;
		--w_small: 0.75rem;
	}
}  */

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