@charset "utf-8";

/* ============================================================
	button.css
	Hyomin Design System v1.0 — Button Component

	사용법:
	<button class="button button--primary">Button</button>
	<button class="button button--secondary button--sm">Button</button>
	<button class="button button--accent button--lg" disabled>Button</button>
	============================================================ */


/* ─────────────────────────────────────────
	Base
	───────────────────────────────────────── */

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-secondary);
	font-weight: var(--font-weight-regular);
	color: #ffffff;
	border-radius: var(--radius-md);
	text-align: center;
	white-space: nowrap;
	transition: background-color var(--duration-fast) var(--easing-default);

	/* Default Size */
	height: 40px;
	min-width: 120px;
	padding: 0 var(--spacing-2);
	font-size: var(--font-size-body-base); /* 18px */
	line-height: 27px;
}


/* ─────────────────────────────────────────
	Size
	───────────────────────────────────────── */

/* Small */
.button--sm {
	height: 32px;
	min-width: 80px;
	padding: 0 var(--spacing-2);
	font-size: var(--font-size-caption); /* 14px — Figma: Body xs */
	line-height: 20px;
}

/* Large */
.button--lg {
	height: 48px;
	min-width: 120px;
	padding: 0 var(--spacing-3);
	font-size: var(--font-size-body-sm); /* 16px */
	line-height: 24px;
}


/* ─────────────────────────────────────────
	Variants
	───────────────────────────────────────── */

/* Primary */
.button--primary {
	background-color: var(--color-primary-main);
}

.button--primary:hover {
	background-color: var(--color-primary-hover);
}

.button--primary:active {
	background-color: var(--color-primary-active);
}

.button--primary:focus-visible {
	outline: 3px solid var(--red-600);
	outline-offset: -3px;
}

.button--primary:disabled,
.button--primary[aria-disabled="true"] {
	background-color: var(--color-primary-disabled);
	cursor: not-allowed;
	pointer-events: none;
}


/* Secondary */
.button--secondary {
	background-color: var(--color-secondary-main);
}

.button--secondary:hover {
	background-color: var(--color-secondary-hover);
}

.button--secondary:active {
	background-color: var(--color-secondary-active);
}

.button--secondary:focus-visible {
	outline: 3px solid var(--red-600);
	outline-offset: -3px;
}

.button--secondary:disabled,
.button--secondary[aria-disabled="true"] {
	background-color: var(--color-secondary-disabled);
	cursor: not-allowed;
	pointer-events: none;
}


/* Accent */
.button--accent {
	background-color: var(--color-accent-main);
}

.button--accent:hover {
	background-color: var(--color-accent-hover);
}

.button--accent:active {
	background-color: var(--color-accent-active);
}

.button--accent:focus-visible {
	outline: 3px solid var(--blue-600);
	outline-offset: -3px;
}

.button--accent:disabled,
.button--accent[aria-disabled="true"] {
	background-color: var(--color-accent-disabled);
	cursor: not-allowed;
	pointer-events: none;
}