/*
 * Toga shared components — button, form-control and card patterns.
 *
 * Building blocks for new markup (search, header, hero). Existing,
 * already-working surfaces (product card, store card, checkout fields) are
 * not migrated onto these classes in this pass — see docs/DESIGN_SYSTEM.md
 * for which surfaces still carry their own historical rules and why. Loaded
 * after tokens.css and before brand.css (see toga_child_enqueue_assets()).
 */

/* -------------------------------------------------------------------- */
/* Buttons                                                               */
/* -------------------------------------------------------------------- */

.toga-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-height: var(--toga-tap-target);
	padding: var(--toga-btn-padding-y-sm) var(--toga-btn-padding-x-sm);
	border: 1px solid transparent;
	border-radius: var(--toga-btn-radius);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--toga-duration-base) var(--toga-ease),
		color var(--toga-duration-base) var(--toga-ease),
		border-color var(--toga-duration-base) var(--toga-ease);
}

.toga-btn--lg {
	padding: var(--toga-btn-padding-y) var(--toga-btn-padding-x);
}

.toga-btn--primary {
	background-color: var(--toga-terracotta);
	border-color: var(--toga-terracotta);
	color: var(--toga-paper);
}

.toga-btn--primary:hover,
.toga-btn--primary:focus-visible {
	background-color: var(--toga-terracotta-hover);
	border-color: var(--toga-terracotta-hover);
	color: var(--toga-paper);
}

.toga-btn--ink {
	background-color: var(--toga-ink);
	border-color: var(--toga-ink);
	color: var(--toga-paper);
}

.toga-btn--ink:hover,
.toga-btn--ink:focus-visible {
	background-color: var(--toga-ink-hover);
	border-color: var(--toga-ink-hover);
	color: var(--toga-paper);
}

.toga-btn--outline {
	background-color: transparent;
	border-color: currentColor;
	color: var(--toga-ink);
}

.toga-btn--outline:hover,
.toga-btn--outline:focus-visible {
	background-color: var(--toga-ink);
	border-color: var(--toga-ink);
	color: var(--toga-paper);
}

/* An outline button presented over a dark/photo background (the hero)
   needs a Paper outline, not an Ink one it would disappear against. */
.toga-btn--outline-inverse {
	background-color: transparent;
	border-color: var(--toga-paper);
	color: var(--toga-paper);
}

.toga-btn--outline-inverse:hover,
.toga-btn--outline-inverse:focus-visible {
	background-color: var(--toga-paper);
	border-color: var(--toga-paper);
	color: var(--toga-ink);
}

/* -------------------------------------------------------------------- */
/* Form controls                                                         */
/* -------------------------------------------------------------------- */

.toga-form-control {
	display: block;
	width: 100%;
	height: var(--toga-control-height);
	padding: 0 var(--toga-space-3);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.9375rem;
	color: var(--toga-ink);
	background-color: var(--toga-surface);
	border: 1px solid var(--toga-border-strong);
	border-radius: var(--toga-control-radius);
	transition: border-color var(--toga-duration-base) var(--toga-ease);
}

.toga-form-control::placeholder {
	color: var(--toga-ink-60);
}

.toga-form-control:focus-visible {
	outline: var(--toga-focus-ring-width) solid var(--toga-focus-ring-color);
	outline-offset: var(--toga-focus-ring-offset);
	border-color: var(--toga-terracotta);
}

/* -------------------------------------------------------------------- */
/* Cards                                                                 */
/* -------------------------------------------------------------------- */

.toga-card {
	display: block;
	border: 1px solid var(--toga-border);
	border-radius: var(--toga-radius-md);
	background-color: var(--toga-surface);
	transition:
		border-color var(--toga-duration-base) var(--toga-ease),
		transform var(--toga-duration-base) var(--toga-ease);
}

.toga-card:hover,
.toga-card:focus-visible {
	border-color: var(--toga-terracotta);
}

/* -------------------------------------------------------------------- */
/* Focus-visible — canonical ring, token-driven                         */
/* -------------------------------------------------------------------- */

.toga-focus-ring:focus-visible {
	outline: var(--toga-focus-ring-width) solid var(--toga-focus-ring-color);
	outline-offset: var(--toga-focus-ring-offset);
}