/**
 * Reusable visual primitives. Components consume semantic tokens only.
 */

.am-button {
	display: inline-flex;
	min-height: var(--am-control-height);
	padding: var(--am-space-3) var(--am-space-control-x);
	align-items: center;
	justify-content: center;
	gap: var(--am-space-2);
	border: var(--am-border-width) solid transparent;
	border-radius: var(--am-manager-cta-radius, var(--am-radius-button));
	font-size: var(--am-font-size-control);
	font-weight: 600;
	letter-spacing: var(--am-letter-spacing-control);
	line-height: var(--am-line-height-control);
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	transition:
		background-color var(--am-duration-standard) var(--am-ease-standard),
		border-color var(--am-duration-standard) var(--am-ease-standard),
		color var(--am-duration-standard) var(--am-ease-standard);
}

.am-button--primary {
	border-radius: var(--am-manager-cta-radius, var(--am-radius-pill));
	background: var(--am-color-primary);
	color: var(--am-color-on-primary);
}

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

.am-button--secondary {
	border-color: var(--am-color-border);
	background: transparent;
	color: var(--am-color-text);
}

.am-button--secondary:hover {
	border-color: var(--am-color-primary-dark);
	background: var(--am-color-surface);
}

.am-button--soft {
	border-color: color-mix(in srgb, var(--am-color-primary-dark) 22%, transparent);
	border-radius: var(--am-manager-cta-radius, var(--am-radius-pill));
	background: color-mix(in srgb, var(--am-color-primary) 30%, var(--am-color-white) 70%);
	color: var(--am-color-text);
}

.am-button--soft:hover {
	border-color: color-mix(in srgb, var(--am-color-primary-dark) 44%, transparent);
	background: color-mix(in srgb, var(--am-color-primary) 58%, var(--am-color-white) 42%);
	color: var(--am-color-text);
}

.am-button__icon {
	transition: transform var(--am-duration-micro) var(--am-ease-standard);
}

.am-button:hover .am-button__icon {
	transform: translateX(var(--am-motion-shift));
}

.am-button:disabled,
.am-button[aria-disabled="true"] {
	opacity: 0.55;
	cursor: not-allowed;
}

.am-editorial-link {
	display: inline-flex;
	padding-block: var(--am-space-1);
	align-items: center;
	gap: var(--am-space-2);
	background-image: var(--am-gradient-signature);
	background-position: left bottom;
	background-repeat: no-repeat;
	background-size: 100% 1px;
	color: var(--am-color-text);
	font-weight: 600;
	text-decoration: none;
}

.am-icon-button {
	display: inline-grid;
	width: var(--am-touch-target);
	height: var(--am-touch-target);
	padding: 0;
	place-items: center;
	border: var(--am-border-width) solid var(--am-color-border);
	border-radius: 50%;
	background: var(--am-color-background);
	color: var(--am-color-text);
	cursor: pointer;
	transition:
		background-color var(--am-duration-micro) var(--am-ease-standard),
		border-color var(--am-duration-micro) var(--am-ease-standard);
}

.am-icon-button:hover {
	border-color: var(--am-color-primary-dark);
	background: var(--am-color-surface);
}

.am-icon {
	width: var(--am-icon-size);
	height: var(--am-icon-size);
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.65;
}

.am-contact-action {
	display: flex;
	min-height: var(--am-touch-target);
	padding: var(--am-space-4);
	align-items: center;
	gap: var(--am-space-3);
	border: var(--am-border-width) solid var(--am-color-border);
	border-radius: var(--am-radius-card);
	background: var(--am-color-surface);
	color: var(--am-color-text);
	text-decoration: none;
	transition:
		border-color var(--am-duration-standard) var(--am-ease-standard),
		background-color var(--am-duration-standard) var(--am-ease-standard);
}

.am-contact-action:hover {
	border-color: var(--am-color-primary-dark);
	background: var(--am-color-background);
}

.am-card {
	padding: var(--am-space-card);
	border: var(--am-border-width) solid var(--am-color-border);
	border-radius: var(--am-radius-card);
	background: var(--am-color-surface);
	box-shadow: var(--am-shadow-subtle);
}

.am-card--editorial {
	border-radius: var(--am-radius-important);
	background: var(--am-color-background);
}

.am-card--service {
	border-inline-start: 2px solid var(--am-color-primary);
}

.am-signature-line {
	width: min(100%, 12rem);
	height: 1px;
	border: 0;
	margin: 0;
	background: var(--am-gradient-signature);
}

.am-field {
	display: grid;
	gap: var(--am-space-2);
}

.am-field__label {
	color: var(--am-color-text);
	font-size: var(--am-font-size-small);
	font-weight: 600;
}

.am-input,
.am-textarea,
.am-select {
	width: 100%;
	min-height: var(--am-control-height);
	padding: var(--am-space-3) var(--am-space-4);
	border: var(--am-border-width) solid var(--am-color-border);
	border-radius: var(--am-radius-input);
	background: var(--am-color-white);
	color: var(--am-color-text);
	transition:
		border-color var(--am-duration-micro) var(--am-ease-standard),
		box-shadow var(--am-duration-micro) var(--am-ease-standard);
}

.am-textarea {
	min-height: 8rem;
	resize: vertical;
}

.am-input:disabled,
.am-textarea:disabled,
.am-select:disabled {
	background: var(--am-color-surface);
	color: var(--am-color-muted);
	cursor: not-allowed;
	opacity: 0.7;
}

.am-checkbox {
	width: 1.25rem;
	height: 1.25rem;
	margin: 0;
	accent-color: var(--am-color-primary-dark);
}

.am-checkbox-field {
	display: flex;
	align-items: flex-start;
	gap: var(--am-space-3);
}

.am-field__help,
.am-field__message {
	margin: 0;
	color: var(--am-color-muted);
	font-size: var(--am-font-size-small);
}

.am-field.is-error :where(.am-input, .am-textarea, .am-select) {
	border-color: var(--am-color-error);
	box-shadow: inset 3px 0 0 var(--am-color-error);
}

.am-field.is-error .am-field__message {
	color: var(--am-color-error);
	font-weight: 600;
}

.am-field.is-success :where(.am-input, .am-textarea, .am-select) {
	border-color: var(--am-color-success);
	box-shadow: inset 3px 0 0 var(--am-color-success);
}

.am-field.is-success .am-field__message {
	color: var(--am-color-success);
	font-weight: 600;
}

@media (max-width: 47.99rem) {
	.am-button {
		width: 100%;
	}

	.am-input,
	.am-textarea,
	.am-select {
		font-size: 1rem;
	}
}