/**
 * OSHIDA — button.
 *
 * @figma 1364:1264  the CTA pill, 376.21 x 77.39
 * @figma 1364:1267  shell — 1px solid #454545, gradient #1F1F1F -> #373737,
 *                   radius 38.694 on h=77.388, i.e. a true pill
 * @figma 1364:1268  gold knob — 103.87 x 58.53, inset 9.52 inline / 9.43 block
 * @figma 1364:1269  label — 22px / 400 / +0.02em, white, at x=134.71 of 376.21
 *
 * THE GOLD GRADIENT IS A DELIBERATE CORRECTION.
 * docs/ai/design-tokens.md §9.9: Figma exported --o-gold-gradient with stops at
 * 114.95% and 108.15%, out of range and in reverse order, which every browser
 * flattens to a solid --o-gold. Sampling the render across the knob shows a
 * real ramp, rgb(173,146,112) at the physical left rising to rgb(187,163,128)
 * at the physical right, i.e. deep at the inline end and light at the inline
 * start. --o-button-gold below ships that ramp using the two measured gold
 * tokens. It is NOT what Figma exported. Awaiting user confirmation; when it
 * comes, this is the single declaration to change.
 *
 * Owner: work package B1.
 */

.o-button {
	--o-button-gold: linear-gradient(to left, var(--o-gold) 0%, var(--o-gold-deep) 100%);
	--o-button-mint: linear-gradient(to left, var(--o-mint) 0%, var(--o-mint) 100%);

	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--o-space-sm);
	min-block-size: 77px;
	padding-inline: 42px 9px;
	padding-block: 9px;
	border: var(--o-line-width) solid var(--o-line);
	border-radius: var(--o-radius-pill);
	background-image: var(--o-cta-gradient);
	color: var(--o-text);
	font-size: var(--o-fs-lg);
	font-weight: var(--o-fw-regular);
	line-height: var(--o-lh-heading);
	letter-spacing: var(--o-track-cta);
	text-decoration: none;
	text-align: start;
}

.o-button__label {
	display: block;
}

/* The 103.87 x 58.53 knob. It carries the accent, so the variants only ever
 * change one custom property. */
.o-button__knob {
	display: grid;
	flex: none;
	place-items: center;
	inline-size: 104px;
	block-size: 58px;
	border-radius: var(--o-radius-pill);
	background-image: var(--o-button-accent, var(--o-button-gold));
	color: var(--o-text-on-gold);
}

.o-button__arrow {
	inline-size: 24px;
	block-size: 25px;
}

/* A button with no knob still needs an inline-end edge. */
.o-button:not(.o-button--knob) {
	justify-content: center;
	padding-inline: 42px;
}

/* --------------------------------------------------------------------------
 * Variants
 * -------------------------------------------------------------------------- */

.o-button--gold {
	--o-button-accent: var(--o-button-gold);
}

/*
 * NO NODE IN THE PHASE-1 SECTION USES MINT. docs/ai/design-tokens.md §2 records
 * that the accent does not appear in any of the six measured nodes, and the
 * second CTA (1559:896, «شروع یک گفتگوی استراتژیک») was re-sampled off the
 * render for this work package and is gold too. --o-mint survives in tokens.css
 * carried over from render sampling of the icon palette. This variant exists
 * because B1 was asked for it; do not reach for it until a node produces it.
 */
.o-button--mint {
	--o-button-accent: var(--o-button-mint);
	color: var(--o-text);
}

.o-button--mint .o-button__knob {
	color: var(--o-text-on-gold);
}

.o-button--ghost {
	min-block-size: 60px;
	padding-inline: var(--o-space-md);
	background-image: none;
	background-color: var(--o-veil-card);
}

/* --------------------------------------------------------------------------
 * States
 * -------------------------------------------------------------------------- */

.o-button:hover {
	border-color: var(--o-gold-deep);
}

.o-button:active {
	scale: 0.99;
}

.o-button[aria-disabled="true"],
.o-button:disabled {
	opacity: var(--o-muted-opacity);
	pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
	.o-button {
		transition:
			border-color var(--o-dur-fast) var(--o-ease-standard),
			scale var(--o-dur-instant) var(--o-ease-standard);
	}

	.o-button__arrow {
		transition: translate var(--o-dur-base) var(--o-ease-out);
	}

	/* Toward the inline end, which is where the arrow points. */
	.o-button:hover .o-button__arrow {
		translate: -4px 0;
	}
}

@media (max-width: 599px) {
	.o-button {
		inline-size: 100%;
		padding-inline: var(--o-space-md) 9px;
	}

	.o-button__knob {
		inline-size: 76px;
	}
}