/* Part of the component CSS split: one file per component.
   Loaded by views/layout.templ in cascade order after tokens.css.
   Component: see views/components/ (same base name). */

/* Controls */
.button {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 3.25rem;
	padding: .7rem 1.25rem;
	border: 1px solid var(--border);
	color: var(--accent-contrast);
	background: var(--accent);
	font: 700 .7rem/1 var(--font-mono);
	letter-spacing: .08em;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	transition: transform 100ms ease, box-shadow 100ms ease;
}

.button::after { content: " ↗"; margin-left: .75rem; }
.button:hover {
	color: var(--accent-contrast);
	box-shadow: 3px 3px 0 var(--border);
	text-decoration: none;
	transform: translate(-2px, -2px);
}

/* accent-contrast flips with the theme: white on the dark danger red in
   light mode, near-black on the light danger red in dark mode — #fff
   would fail contrast against the dark-theme danger color. */
.button-danger { color: var(--accent-contrast); background: var(--danger); }
.button-ghost { color: var(--fg); background: var(--bg-elevated); }
.button-ghost:hover { color: var(--fg); background: var(--bg-subtle); }