/*
 * THE FOUR BUTTON ROLES for kihonhq.com, one class each, the same words and
 * hovers as the app (research/DESIGN-SYSTEM.md section 2, web/src/app.css):
 *
 *   primary     the one filled action. Hover: the whole button grows to 1.03,
 *               NO colour change, no lift, no glow.
 *   prominent   one step below: outlined surface. Hover: the surface tints.
 *   secondary   bold action-blue text standing alone (not inside a sentence).
 *               Hover: the 12% action plate plus a 6px halo.
 *   link        an <a> inside a sentence, no class. Hover: underline.
 *
 * Every page links this file BEFORE its own <style>, so a page keeps only real
 * local differences (a full width, a margin, a state fill through --fill) and
 * wins those at equal specificity. It used to be four copies of one recipe
 * under five names (.btn-primary, .btn-demo, .submit-btn, .nav-join,
 * .btn-founding) with three different hovers, and the legal pages had none at
 * all: their filled buttons only underlined.
 *
 * Tokens: every marketing page already defines --action, --surface, --border
 * and --text, so this file reads nothing new.
 */

.primary,
.prominent {
	display: inline-block;
	font: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.5;
	padding: 9px 16px;
	border-radius: 10px;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.primary {
	/* THE FILL IS A VARIABLE with one writer. A band that needs another fill
	   (the founding band's white button) sets --fill, never background. */
	--fill: var(--action-fill, var(--action));
	background: var(--fill);
	color: #fff;
	/* Transparent, not none: a primary beside a prominent sits at the same height. */
	border: 1px solid transparent;
	transition: transform 0.12s ease;
	/* Own compositing layer, so the hover scale moves the label as one
	   rasterised piece instead of re-snapping it to the pixel grid. */
	will-change: transform;
}
.primary:where(:not(:disabled)):hover {
	transform: scale(1.03);
}
.primary:where(:not(:disabled)):active {
	transform: scale(0.96);
}

.prominent {
	background: var(--surface);
	color: var(--text);
	border: 1px solid var(--border);
	transition: background-color 150ms ease;
}
/* Mixed from the text colour so it reads in both themes: --bg-alt is DARKER
   than the surface in dark mode, the sunken hover the app ruled out. */
.prominent:where(:not(:disabled)):hover {
	background: color-mix(in srgb, var(--text) 7%, var(--surface));
}
/* On a coloured band (the hero gradient) the outline is white glass. */
.prominent.on-dark {
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	border-color: rgba(255, 255, 255, 0.7);
}
.prominent.on-dark:where(:not(:disabled)):hover {
	background: rgba(255, 255, 255, 0.26);
}

/* A link wearing a button role never underlines. The pages' global a:hover
   outranks a bare class, so the element is named here. */
a.primary,
a.primary:hover,
a.prominent,
a.prominent:hover,
a.secondary,
a.secondary:hover {
	text-decoration: none;
}

/* Section-sized. Compound on purpose, because <div class="cta"> wraps the
   closing buttons on several pages and must not be painted. */
.primary.cta,
.prominent.cta {
	font-size: 1.05rem;
	padding: 15px 34px;
	/* A long label wraps on a narrow phone instead of pushing the page sideways
	   (WCAG 1.4.10 reflow: "See exactly what is included" was 292px at 320). */
	white-space: normal;
	max-width: 100%;
}

/* A glint across the FILL, the app's .t-promote sheen: a white band wider than
   the button walks across it, then rests. The label stays plain white, so it
   reads the same at every frame. This replaced a text shimmer (the label
   itself painted with a moving gradient) that looked washed out and left the
   label faint once motion was reduced. Marketing loops it because the button
   is asking for attention, the app plays it only on hover because staff sit
   on those screens all day. */
.primary.sheen {
	position: relative;
	overflow: hidden;
}
.primary.sheen::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: linear-gradient(
		100deg,
		transparent 35%,
		rgba(255, 255, 255, 0.4) 50%,
		transparent 65%
	);
	background-size: 250% 100%;
	background-repeat: no-repeat;
	background-position: 160% 0;
	animation: primary-sheen 3.6s ease-in-out infinite;
}
@keyframes primary-sheen {
	0% {
		background-position: 160% 0;
	}
	40%,
	100% {
		background-position: -60% 0;
	}
}
/* Both motion doors: the OS setting and the site's own Reduce motion switch.
   No glint at all, just the plain filled button. */
:root[data-reduced-motion='true'] .primary.sheen::after {
	display: none;
}

.primary:disabled,
.prominent:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.secondary {
	font-weight: 600;
	color: var(--action);
	text-decoration: none;
	border-radius: 6px;
	transition:
		background-color 150ms ease,
		box-shadow 150ms ease;
}
.secondary:hover {
	background: color-mix(in srgb, var(--action) 12%, transparent);
	box-shadow: 0 0 0 6px color-mix(in srgb, var(--action) 12%, transparent);
}

/* LINK: an <a> with no class inside a sentence, a list, a table cell or the
   footer is underlined at rest, not only on hover. WCAG 1.4.1: colour alone
   may not mark it, and body-grey to link-blue is only 1.46:1. (0,1,2), so it
   beats the pages' bare `a { text-decoration: none }` without !important. */
:is(p, li, td, footer) a:not([class]) {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.primary:focus-visible,
.prominent:focus-visible,
.secondary:focus-visible {
	outline: 2px solid var(--action);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.primary,
	.prominent,
	.secondary {
		transition: none;
	}
	.primary:where(:not(:disabled)):hover,
	.primary:where(:not(:disabled)):active {
		transform: none;
	}
	.primary.sheen::after {
		display: none;
	}
}