/* CTA - a call to action: the thing a page most wants the visitor to do.
   A class, so it works on whatever element does the job - a link that
   goes somewhere (<a class='cta'>) or a button that does something here
   (<button class='cta'>). Named for the job, not the look: in one theme it
   is a pill, in another a box.

     .cta           the everyday one - an outline in the link color
     .cta.featured  the one per page that matters most - bigger, filled

   Its colors and shape are slots, so a look repaints it from above without
   a selector in here. The defaults hold in every look: the outline speaks
   in the link color, which already reads on every paper, and the featured
   fill is the page's ink with paper type - the strongest pair each look
   has. The Toast look (settings/flavors.css) paints featured as their
   "Get a Demo" gradient; Marketing (settings/characters.css) makes both
   pills.
     --cta-ink / --cta-stroke / --cta-fill
     --cta-featured-ink / --cta-featured-stroke / --cta-featured-fill
     --cta-corners */
.cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.5em 1.1em;
	border: 1.5px solid var(--cta-stroke, var(--link-color));
	border-radius: var(--cta-corners, var(--corners, 0));
	background: var(--cta-fill, transparent);
	color: var(--cta-ink, var(--link-color));
	text-decoration: none;
	cursor: pointer;

	/* No hover state, on purpose (Derek, 2026-10-14): outside the chrome,
	   the pointer cursor is enough. Focus is not optional - a keyboard
	   visitor has no cursor. */
	&:focus-visible {
		outline: 2px solid var(--accent);
		outline-offset: 3px;
	}

	&.featured {
		padding: 0.75em 1.6em;
		border-color: var(--cta-featured-stroke, transparent);
		background: var(--cta-featured-fill, var(--ink-primary));
		color: var(--cta-featured-ink, var(--fill-primary));
	}
}