/**
 * SCRM brand tokens + Stisla button bridge — load AFTER stisla.css.
 * @see https://stisla.dev/docs/theming
 *
 * Tailwind 3.4 ships Preflight unlayered. If stisla.css is still wrapped in
 * `@layer components` (stale deploy), unlayered Preflight beats Stisla `.button`.
 * This unlayered `button.button` bridge always wins via specificity + source order.
 */
:root {
	--shell-bg: var(--color-background, #f4f6fb);
	--color-primary: oklch(0.62 0.14 210);
	--color-primary-foreground: oklch(1 0 0);
	--color-primary-emphasis: oklch(0.48 0.12 210);
	--spacing: 0.22rem;
	--font-sans: 'Manrope', 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
	--illus-accent: var(--color-primary);
}

button.button,
a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--button-gap, calc(var(--spacing) * 2));
	height: var(--button-height, calc(var(--spacing) * 9));
	padding-block: var(--button-padding-block, 0);
	padding-inline: var(--button-padding-inline, calc(var(--spacing) * 3));
	font-family: inherit;
	font-size: var(--button-font-size, var(--text-sm, 0.875rem));
	font-weight: var(--button-font-weight, 500);
	line-height: 1;
	color: var(--button-color, var(--color-foreground, #0f172a));
	background-color: var(--button-tone, var(--color-neutral, #e5e7eb));
	background-image: none;
	border: var(--button-border-width, var(--st-border-width, 1px)) solid
		var(--button-border-color, var(--button-tone, var(--color-border, #e5e7eb)));
	border-radius: var(--button-radius, var(--radius-md, 0.75rem));
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	user-select: none;
}

button.button.button--primary,
a.button.button--primary {
	--button-tone: var(--color-primary);
	--button-color: var(--color-primary-foreground);
	background-color: var(--color-primary);
	color: var(--color-primary-foreground);
	border-color: var(--color-primary-emphasis, var(--color-primary));
}

button.button.button--danger,
a.button.button--danger {
	--button-tone: var(--color-danger);
	--button-color: var(--color-danger-foreground, #fff);
	background-color: var(--color-danger);
	color: var(--color-danger-foreground, #fff);
	border-color: var(--color-danger-emphasis, var(--color-danger));
}

button.button.button--neutral,
a.button.button--neutral {
	--button-tone: var(--color-neutral);
	--button-color: var(--color-neutral-foreground, #0f172a);
	background-color: var(--color-neutral);
	color: var(--color-neutral-foreground, #0f172a);
	border-color: oklch(0.91 0 0);
}

button.button.button--ghost,
a.button.button--ghost {
	background-color: transparent;
	border-color: transparent;
	color: var(--button-tone-emphasis, var(--button-tone, var(--color-foreground)));
	box-shadow: none;
}

button.button.button--sm,
a.button.button--sm {
	--button-height: calc(var(--spacing) * 7);
	--button-padding-inline: calc(var(--spacing) * 2.5);
	--button-radius: var(--radius-sm, 0.65rem);
}

button.button.button--lg,
a.button.button--lg {
	--button-height: calc(var(--spacing) * 11);
	--button-padding-inline: calc(var(--spacing) * 4);
}

button.button.button--icon-only,
a.button.button--icon-only {
	--button-padding-inline: 0;
	width: var(--button-height, calc(var(--spacing) * 9));
}

button.button:disabled,
button.button[aria-disabled='true'],
a.button[aria-disabled='true'] {
	cursor: not-allowed;
	opacity: 0.55;
	pointer-events: none;
}