/* ==========================================================
   FIGORA ONE v2.1
   Buttons
   ========================================================== */

/* ----------------------------------------------------------
   Base Button
---------------------------------------------------------- */

.btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:.6rem;

	min-height:48px;
	padding:16px 32px;

	font-family:var(--font-body);
	font-size:var(--fs-base);
	font-weight:var(--fw-semibold);
	line-height:1;

	text-decoration:none;
	white-space:nowrap;
	user-select:none;

	border:none;
	border-radius:var(--radius-md);

	cursor:pointer;

	transition:
		transform var(--transition),
		box-shadow var(--transition),
		background var(--transition),
		color var(--transition),
		border-color var(--transition);
}

/* ----------------------------------------------------------
   Primary
---------------------------------------------------------- */

.btn-primary{
	background:var(--gradient-brand);
	color:var(--color-white);
	box-shadow:var(--shadow-md);
}

.btn-primary:hover{
	transform:translateY(-3px);
	box-shadow:var(--shadow-lg);
}

/* ----------------------------------------------------------
   Secondary
---------------------------------------------------------- */

.btn-secondary{
	background:var(--color-white);
	color:var(--color-secondary);
	border:2px solid var(--color-border);
}

.btn-secondary:hover{
	background:var(--color-surface-alt);
	color:var(--color-secondary-dark);
	border-color:var(--color-secondary);

	transform:translateY(-3px);
}

/* ----------------------------------------------------------
   Outline
---------------------------------------------------------- */

.btn-outline{
	background:transparent;
	color:var(--color-secondary);
	border:2px solid var(--color-secondary);
}

.btn-outline:hover{
	background:var(--color-secondary);
	color:var(--color-white);

	transform:translateY(-3px);
}

/* ----------------------------------------------------------
   Dark
---------------------------------------------------------- */

.btn-dark{
	background:var(--color-primary);
	color:var(--color-white);
}

.btn-dark:hover{
	background:var(--color-primary-dark);

	transform:translateY(-3px);
}

/* ----------------------------------------------------------
   Light
---------------------------------------------------------- */

.btn-light{
	background:var(--color-white);
	color:var(--color-primary);

	border:1px solid var(--color-border);
}

.btn-light:hover{
	background:var(--color-bg);

	transform:translateY(-3px);
}

/* ----------------------------------------------------------
   Shared Active State
---------------------------------------------------------- */

.btn:active{
	transform:translateY(0);
}

/* ----------------------------------------------------------
   Sizes
---------------------------------------------------------- */

.btn-sm{
	min-height:40px;
	padding:12px 24px;

	font-size:var(--fs-sm);
}

.btn-lg{
	min-height:56px;
	padding:20px 42px;

	font-size:var(--fs-lg);
}

/* ----------------------------------------------------------
   Full Width
---------------------------------------------------------- */

.btn-block{
	display:flex;
	width:100%;
}

/* ----------------------------------------------------------
   Disabled
---------------------------------------------------------- */

.btn:disabled,
.btn.disabled{
	opacity:.6;

	cursor:not-allowed;
	pointer-events:none;
}

/* ----------------------------------------------------------
   Focus
---------------------------------------------------------- */

.btn:focus-visible{
	outline:3px solid rgba(37,99,235,.35);
	outline-offset:4px;
}

/* ----------------------------------------------------------
   Icons
---------------------------------------------------------- */

.btn svg{
	width:18px;
	height:18px;

	flex-shrink:0;
}

/* ----------------------------------------------------------
   Responsive
---------------------------------------------------------- */

@media (max-width:767px){

	.btn{
		width:100%;
		justify-content:center;
	}

	.btn-sm,
	.btn-lg{
		width:100%;
	}
}