/* ______________________________________________ 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: 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;

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

	/* 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: 400;
	--font-weight-1: 600;
	--font-weight-2: 700;
}



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

/* telas grandes  */
@media screen and (min-width: 1440px) {
	:root {
		--w_h0: 6rem;
		/* --w_h0: 5.25rem;  */
		--w_h1: 4.5rem;
		--w_h2: 3rem;
		--w_h3: 2.5rem;
		--w_h4: 2rem;
		--w_h5: 1.5rem;
		--w_h6: 1.25rem;
	}
}
/* Laptop  */
@media screen and (max-width: 1440px) {
	:root {
		--w_h0: 4.5rem;
		/* --w_h0: 3.75rem; */
		--w_h1: 3rem;
		--w_h2: 2rem;
		--w_h3: 1.75rem;
		--w_h4: 1.5rem;
		--w_h5: 1.25rem;
		--w_h6: 1rem;
	}
}
/* tablet  */
@media screen and (max-width: 800px) {
	:root {
		--w_h0: 3.75rem;
		/* --w_h0: 3.125rem;  */
		--w_h1: 2.5rem;
		--w_h2: 1.75rem;
		--w_h3: 1.5rem;
		--w_h4: 1.25rem;
		--w_h5: 1rem;
		--w_h6: 0.875rem;
	}
}

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



/* _______________________________ Tamanho de texto _______________________________ */

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

		/* p = 4 */

	}


	/*_______________________________ 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: 0.8em;
		padding-inline: 2.5em;
		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;
	}

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



	/* fontes */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');