/*
 * isjac/button — kit token bridge + verbatim kit chrome.
 *
 * Two parts, in order:
 *
 *   1. A `:root` bridge that aliases the ui-kit's neutral token names
 *      (`--color-cta`, `--font-display`, …) onto this theme's own
 *      `--isjac-*` tokens (_00-tokens.generated.css). Values only — no
 *      rule is restated here, so the bridge can't drift from the button
 *      chrome it feeds.
 *   2. The kit's `Button.css` rules, copied verbatim from
 *      `ui-kit/src/components/Button.css` (`.btn`, `.btn--primary`,
 *      `.btn--secondary`, `.btn--ghost` + on-dark surface variants).
 *      The block's render/editor output both emit the kit's neutral
 *      `btn btn--*` classes (not `.isjac-btn`), so this is the ONLY
 *      stylesheet either context needs — registered once below and
 *      loaded by both the front end (`kadence_isjac_engagement_stylesheets()`)
 *      and the block editor (`add_editor_style()`), same file, same rules.
 *
 * To change a value: retune the bridge (or the underlying `--isjac-*`
 * token) — never hand-edit the copied rules below, or this file silently
 * forks from the kit's source of truth.
 */

:root {
	--color-cta:            var(--isjac-color-brand-deep);
	--color-cta-text:       var(--isjac-color-paper);
	--color-paper:          var(--isjac-color-paper);
	--color-link:           var(--isjac-color-brand-link);
	--color-surface-tinted: var(--isjac-surface-tinted);
	--state-lift:           var(--isjac-state-lift);
	--font-display:         var(--isjac-font-family);
	--font-weight-medium:   var(--isjac-font-weight-medium);
	--radius-md:            var(--isjac-radius-md);
	--border-width-emphasis: 1.5px; /* isjac has no border-width token yet; matches the literal _05-buttons.generated.css uses today. */
	--button-min-height:    var(--isjac-button-min-height);
	--button-padding-inline: var(--isjac-pad-lg);
	--button-font-size:     var(--isjac-button-font-size);
	--line-height-base:     var(--isjac-line-height-base);
}

/* ==================== Kit Button.css, verbatim ==================== */

.btn {
	--button-transition-duration: 200ms;
	--button-transition-duration-fast: 120ms;
	--button-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
	--button-focus-ring: 0 0 0 2px var(--color-paper), 0 0 0 4px var(--color-cta);
	--button-letter-spacing: 0.01em;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--button-min-height);
	padding: 0 var(--button-padding-inline);
	border-radius: var(--radius-md);
	font-family: var(--font-display);
	font-weight: var(--font-weight-medium);
	font-size: var(--button-font-size);
	letter-spacing: var(--button-letter-spacing);
	text-decoration: none;
	border: var(--border-width-emphasis) solid transparent;
	cursor: pointer;
	white-space: nowrap;
	transition:
		background-color var(--button-transition-duration) var(--button-transition-easing),
		color var(--button-transition-duration) var(--button-transition-easing),
		border-color var(--button-transition-duration) var(--button-transition-easing),
		box-shadow var(--button-transition-duration) var(--button-transition-easing),
		transform var(--button-transition-duration-fast) var(--button-transition-easing);
}

.btn.btn.btn.btn.btn.btn.btn.btn.btn {
	color: var(--btn-color);
}

:where(.btn):focus {
	outline: none;
}

:where(.btn):focus-visible {
	outline: none;
	box-shadow: var(--button-focus-ring);
}

/* ==================== LIGHT SURFACE — default ==================== */
.btn--primary {
	background: var(--color-cta);
	--btn-color: var(--color-cta-text);
	border-color: var(--color-cta);
}

:where(.btn--primary):hover,
:where(.btn--primary):focus-visible {
	background: color-mix(in oklch, var(--color-cta), var(--color-paper) var(--state-lift));
	border-color: color-mix(in oklch, var(--color-cta), var(--color-paper) var(--state-lift));
	--btn-color: var(--color-cta-text);
}

:where(.btn--primary):active {
	background: color-mix(in oklch, var(--color-cta), var(--color-paper) var(--state-lift));
	border-color: color-mix(in oklch, var(--color-cta), var(--color-paper) var(--state-lift));
	--btn-color: var(--color-cta-text);
	transform: translateY(1px);
}

.btn--secondary {
	background: transparent;
	--btn-color: var(--color-cta);
	border-color: var(--color-cta);
}

:where(.btn--secondary):hover,
:where(.btn--secondary):focus-visible {
	background: var(--color-surface-tinted);
	--btn-color: var(--color-cta);
	border-color: var(--color-cta);
}

.btn--ghost {
	display: inline;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	--btn-color: var(--color-link);
	font-family: var(--font-display);
	font-size: inherit;
	font-weight: var(--font-weight-medium);
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	transition: color 150ms ease-out, text-decoration-color 150ms ease-out;
}

:where(.btn--ghost):hover,
:where(.btn--ghost):focus-visible {
	--btn-color: var(--color-cta);
	background: transparent;
	text-decoration: underline;
	text-decoration-color: var(--color-cta);
	text-underline-offset: 3px;
	transform: none;
	box-shadow: none;
}

/* ==================== DARK SURFACE ==================== */
:where(
	.is-style-isjac-hero,
	.isjac-band--invert,
	.site-footer,
	.isjac-surface--dark,
	.isjac-reg-hero,
	.isjac-about .cta
) :is(.btn--primary) {
	background: var(--color-paper);
	--btn-color: var(--color-cta);
	border-color: var(--color-paper);
}

:where(
	.is-style-isjac-hero,
	.isjac-band--invert,
	.site-footer,
	.isjac-surface--dark,
	.isjac-reg-hero,
	.isjac-about .cta
) :is(.btn--primary):hover,
:where(
	.is-style-isjac-hero,
	.isjac-band--invert,
	.site-footer,
	.isjac-surface--dark,
	.isjac-reg-hero,
	.isjac-about .cta
) :is(.btn--primary):focus-visible {
	background: var(--color-surface-tinted);
	--btn-color: var(--color-cta);
	border-color: var(--color-surface-tinted);
}

:where(
	.is-style-isjac-hero,
	.isjac-band--invert,
	.site-footer,
	.isjac-surface--dark,
	.isjac-reg-hero,
	.isjac-about .cta
) :is(.btn--secondary) {
	background: transparent;
	--btn-color: var(--color-paper);
	border-color: var(--color-paper);
}

:where(
	.is-style-isjac-hero,
	.isjac-band--invert,
	.site-footer,
	.isjac-surface--dark,
	.isjac-reg-hero,
	.isjac-about .cta
) :is(.btn--secondary):hover,
:where(
	.is-style-isjac-hero,
	.isjac-band--invert,
	.site-footer,
	.isjac-surface--dark,
	.isjac-reg-hero,
	.isjac-about .cta
) :is(.btn--secondary):focus-visible {
	background: color-mix(in oklch, transparent, var(--color-paper) var(--state-lift));
	--btn-color: var(--color-paper);
	border-color: var(--color-paper);
}

:where(
	.is-style-isjac-hero,
	.isjac-band--invert,
	.site-footer,
	.isjac-surface--dark,
	.isjac-reg-hero,
	.isjac-about .cta
) :is(.btn--ghost) {
	--btn-color: var(--color-paper);
	background: transparent;
	border-color: transparent;
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--color-paper), transparent 50%);
	text-underline-offset: 0.25em;
}

:where(
	.is-style-isjac-hero,
	.isjac-band--invert,
	.site-footer,
	.isjac-surface--dark,
	.isjac-reg-hero,
	.isjac-about .cta
) :is(.btn--ghost):hover,
:where(
	.is-style-isjac-hero,
	.isjac-band--invert,
	.site-footer,
	.isjac-surface--dark,
	.isjac-reg-hero,
	.isjac-about .cta
) :is(.btn--ghost):focus-visible {
	--btn-color: var(--color-paper);
	text-decoration-color: var(--color-paper);
	background: transparent;
}