/*
 * Falcon Fire base styles.
 * Global foundation: resets, a page container, a small reusable
 * button component, and accessibility utilities. No page-specific
 * layout or card design lives here — that belongs to each template's
 * own stylesheet. Depends on tokens.css custom properties.
 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: var(--ff-font-family-base);
	color: var(--ff-charcoal);
	background-color: var(--ff-white);
}

img,
picture,
video,
svg {
	max-width: 100%;
	height: auto;
}

input,
button,
textarea,
select {
	font: inherit;
}

a {
	color: inherit;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid var(--ff-primary-red);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Visually hides content while keeping it available to assistive tech. */
.ff-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Page container — reusable across every template. */
.ff-container {
	max-width: var(--ff-container-max);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2.5rem);
}

/* Button component — reusable across every template. */
.ff-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ff-space-2);
	font-family: var(--ff-font-family-base);
	font-weight: var(--ff-font-weight-secondary);
	font-size: 0.9375rem;
	line-height: 1.2;
	text-decoration: none;
	border-radius: var(--ff-radius-sm);
	padding: 0.85em 1.6em;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ff-btn--primary {
	background-color: var(--ff-primary-red);
	color: var(--ff-white);
}

.ff-btn--primary:hover,
.ff-btn--primary:focus-visible {
	background-color: var(--ff-dark-red);
}

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

.ff-btn--secondary:hover,
.ff-btn--secondary:focus-visible {
	background-color: var(--ff-charcoal);
	color: var(--ff-white);
}