@import url("https://fonts.googleapis.com/css2?family=Sora:wght@100..800&display=swap");

/* colors */
:root {
	--purple: #C374DB;
	--deep-purple: #BE4FDF;
	--cream: #FFF1EB;
	--deep-cream: #FFD9C9;
	--yellow: #FED834;
	--orange: #FF9D00;
	--pink: #FF6EA6;
	--black: #1F1F1F;
	--gray-01: #5E5F64;
	--gray-02: #AFAFAF;
	--gray-03: #E8E8E8;
	--white: #FFFFFF;
}

/* typography */
.heading1 {
	font-weight: 700;
	font-size: 48px;
	line-height: 56px;
}

.heading2 {
	font-weight: 700;
	font-size: 36px;
	line-height: 44px;
}

.heading3 {
	font-weight: 700;
	font-size: 24px;
	line-height: 32px;
}

.heading4 {
	font-weight: 700;
	font-size: 22px;
	line-height: 30px;
}

.large-text-semi-bold {
	font-weight: 600;
	font-size: 20px;
	line-height: 28px;
}

.large-text-regular {
	font-weight: 400;
	font-size: 20px;
	line-height: 28px;
}

.medium-text-semi-bold {
	font-weight: 600;
	font-size: 18px;
	line-height: 26px;
}

.medium-text-regular {
	font-weight: 400;
	font-size: 18px;
	line-height: 26px;
}

.normal-text-semi-bold {
	font-weight: 600;
	font-size: 16px;
	line-height: 24px;
}

.normal-text-regular {
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
}

.small-text-semi-bold {
	font-weight: 600;
	font-size: 14px;
	line-height: 22px;
}

.small-text-regular {
	font-weight: 400;
	font-size: 14px;
	line-height: 22px;
}

.extra-small-text-semi-bold {
	font-weight: 600;
	font-size: 12px;
	line-height: 18px;
}

.extra-small-text-regular {
	font-weight: 400;
	font-size: 12px;
	line-height: 18px;
}

.tiny-text-semi-bold {
	font-weight: 600;
	font-size: 10px;
	line-height: 12px;
}

.tiny-text-regular {
	font-weight: 400;
	font-size: 10px;
	line-height: 12px;
}

@media (max-width: 768px) {
	.heading1 {
		font-size: 36px;
		line-height: 44px;
	}
	.heading3 {
		font-size: 16px;
		line-height: 30px;
	}
	.large-text-regular {
		font-size: 16px;
		line-height: 24px;
	}
	.normal-text-regular {
		font-size: 14px;
		line-height: 22px;
	}
	.normal-text-semi-bold {
		font-size: 14px;
		line-height: 22px;
	}
	.tiny-text-semi-bold {
		font-size: 10px;
		line-height: 12px;
	}
}

/* components */
* {
	margin: 0;
	user-select: none;
	transition: background-color 0.3s ease, color 0.3s ease;
	font-family: "Sora", sans-serif;
	text-decoration: none;
}

::-webkit-scrollbar {
	display: none;
}

button {
	border: none;
	display: flex;             
	align-items: center;        
	justify-content: center;      
}

/* components - text colors */
.black-text {
	color: var(--black);
}

.white-text {
	color: var(--white);
}

.gray-01-text {
	color: var(--gray-01);
}

/* components - button */
.primary-btn1, .primary-btn2 {
	border-radius: 6px;
	padding: 14px 28px;
	background: var(--purple);
	border: solid 2px var(--black);
	box-shadow: -2px 2px 0px 0px #1F1F1F;
}

.primary-btn1:hover, .primary-btn2:hover {
	background: var(--deep-purple);
}

.secondary-btn1, .secondary-btn2 {
	border-radius: 6px;
	padding: 14px 28px;
	background: var(--cream);
	border: solid 2px var(--black);
	box-shadow: -2px 2px 0px 0px #1F1F1F;
}

.secondary-btn1:hover, .secondary-btn2:hover {
	background: var(--deep-cream);
}

.primary-btn1, .secondary-btn1 {
	padding: 14px 28px;
}

.primary-btn2, .secondary-btn2 {
	padding: 14px;
} 

@media (max-width: 768px) {
	.primary-btn1, .secondary-btn1 {
		border-radius: 4px;
		padding: 10px 20px;
	}
	
	.primary-btn2, .secondary-btn2 {
		border-radius: 4px;
		padding: 10px;
	}
	
	.primary-btn2 svg, .secondary-btn2 svg {
		height: 14px;
	}
}

/* components - toggle */
.toggle-container {
    position: relative;
}

.toggle-input {
    display: none;
}

.toggle-label {
    display: flex;
    cursor: pointer;
    width: 64px;
    height: 32px;
    background: var(--white);
    border-radius: 20px;
    position: relative;
    border: solid 1px var(--black);
    align-items: center;
    justify-content: center;
}

.toggle-label:before {
    content: "";
    position: absolute;
    width: 24px;
    height: 24px;
    background: var(--black);
    border-radius: 50%;
    top: 3px;
    left: 3px;
    transition: transform 0.3s ease;
    border: solid 1px var(--black);
}

.toggle-input:checked + .toggle-label {
    background: var(--purple);
    border: solid 1px var(--black); 
}

.toggle-input:checked + .toggle-label:before {
    transform: translateX(32px); 
    background: var(--orange); 
}

.toggle-icon {
    position: absolute;
    opacity: 0;
    left: 38px; 
    transition: opacity 0.3s ease;
}

.toggle-input:checked + .toggle-label .toggle-icon {
    opacity: 1;
    left: 42px; 
}

@media (max-width: 768px) {
	.toggle-label {
		width: 52px;
		height: 26px;
	}
	
	.toggle-label:before {
		width: 20px;
		height: 20px;
		top: 2px;
		left: 2px;
	}
	
	.toggle-input:checked + .toggle-label:before {
		transform: translateX(26px);
	}
	
	.toggle-icon {
		height: 10px;
	}
	
	.toggle-input:checked + .toggle-label .toggle-icon {
		left: 33px;
	}
}

/* components - action button */
.action-btn {
	padding: 8px;
	border-radius: 4px;
	border: solid 2px var(--black);
	box-shadow: -2px 2px 0px 0px #1F1F1F;
	background: var(--cream);
}

.action-btn:hover {
	background: var(--deep-cream);
}

.action-btn:active {
	box-shadow: -2px 2px 0px 0px #BE4FDF;
	background: var(--purple);
}

@media (max-width: 768px) {
	.action-btn {
		border-radius: 3px;
		padding: 6px;
	}
	
	.action-btn svg {
		height: 11px;
	}
}

/* components - badge */
.badge {
	background: var(--purple);
	border-radius: 4px;
	border: solid 1px var(--black);
	padding: 4px 12px;
}

@media (max-width: 768px) {
	.badge {
		border-radius: 3px;
		padding: 3px 8px; 
	}
}

/* text box */
.text-field {
	border-radius: 6px;
	border: solid 1px var(--black);
	padding: 14px 20px;
	box-shadow: -2px 2px 0px 0px #1F1F1F;
	outline: none;
	resize: none;
}

.search-container {
	display: flex;
	align-items: center;
	position: relative;
}

.search-icon {
	position: absolute;
	right: 16px; 
}

.search-field {
	padding: 14px 40px 14px 20px;
	border-radius: 6px;
	border: solid 1px var(--black);
	box-shadow: -2px 2px 0px 0px #1F1F1F;
	outline: none;
}

.text-area {
	height: 120px;
	border-radius: 6px;
	border: solid 1px var(--black);
	padding: 14px 20px;
	box-shadow: -2px 2px 0px 0px #1F1F1F;
	outline: none;
    resize: none;
}

@media (max-width: 768px) {
	.text-field {
		padding: 10px 16px;
	}
	
	.search-field, .text-area {
		padding: 10px 32px 10px 16px;
	}
	
	.search-icon {
		right: 12px; 
		height: 14px;
	}
}

/* tags input */
.input-container {
	height: 120px;
	border-radius: 6px;
	border: solid 1px var(--black);
	padding: 14px 20px;
	gap: 12px;
	box-shadow: -2px 2px 0px 0px #1F1F1F;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

.input-tag-container {
	gap: 6px;
    display: flex;
    flex-wrap: wrap;
    background: var(--gray-03);
    border-radius: 4px;
    padding: 6px 12px;
    align-items: center;
    width: fit-content;
    flex-direction: row;
}

.input-tag-container svg {
	cursor: pointer;
	height: 12px;
}

@media (max-width: 768px) {
	.input-container {
		padding: 10px 16px;
		gap: 8px;
	}

	.input-tag-container {
		gap: 4px;
		padding: 4px 10px;
	}
	
	.input-tag-container svg {
		height: 10px;
	}
}

/* card */
.card-gap {
	width: 282px;
	border: solid 2px var(--black);
	box-shadow: -4px 4px 0px 0px #FED834;
	border-radius: 8px;
	padding: 24px;
	display: flex;
	flex-direction: column;
}

.card-container {
	gap: 16px;
	display: flex;
	flex-direction: column;
}

.badge-container {
	display: flex;
	flex-direction: row;
	gap: 8px;
    flex-wrap: wrap;
	margin-top: 40px;
}

.container-separator {
	width: 100%;
	background: var(--gray-03);
	height: 1px;
}

.details-container {
	display: flex;
	flex-direction: row;
	align-content: space-between;
	justify-content: space-between;
	align-items: center;
}

.card-details {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

@media (max-width: 768px) {
	.card-gap {
		width: 163px;
		padding: 16px;
	}
	.card-container {
		gap: 12px;
	}
	.badge-container {
		gap: 4px;
	}
}