/**
 * ATM Site Factory — global components (token-driven).
 *
 * Reusable, brand-aware building blocks shared across blocks: the button system,
 * the card system, image treatments base, and typography helpers. All values
 * come from --atm-* tokens, so swapping the Brand Pack restyles them globally.
 *
 * Note: base .atm-button / .atm-container live in main.css; this file extends the
 * button system and adds the card + type helper layers.
 */

/* -------------------------------------------------------------------------- */
/* Button system (extensions)                                                 */
/* main.css already defines .atm-button (+ primary/secondary/ghost).          */
/* Radius is token-driven via --atm-radius-button (aliased in tokens.css).    */
/* -------------------------------------------------------------------------- */

.atm-button {
	font-family: var(--atm-font-body);
	border-radius: var(--atm-radius-button);
}

.atm-button--text {
	background: transparent;
	border-color: transparent;
	color: var(--atm-color-primary);
	padding-inline: 0;
}

.atm-button--text:hover {
	color: var(--atm-color-primary-dark);
	text-decoration: underline;
}

.atm-button--light {
	background: var(--atm-color-white);
	color: var(--atm-color-primary);
	border-color: var(--atm-color-white);
}

.atm-button--light:hover {
	background: var(--atm-color-background-alt);
	color: var(--atm-color-primary-dark);
}

.atm-button--dark {
	background: var(--atm-color-secondary);
	color: var(--atm-color-white);
	border-color: var(--atm-color-secondary);
}

.atm-button--dark:hover {
	background: var(--atm-color-black);
	color: var(--atm-color-white);
}

/* -------------------------------------------------------------------------- */
/* Card system                                                                */
/* -------------------------------------------------------------------------- */

.atm-card {
	background: var(--atm-color-surface);
	border-radius: var(--atm-radius-card);
	border: 1px solid transparent;
}

.atm-card--simple {
	background: transparent;
	border-color: transparent;
}

.atm-card--bordered {
	border-color: var(--atm-color-border);
}

.atm-card--elevated {
	box-shadow: var(--atm-shadow-card);
}

.atm-card--soft {
	background: var(--atm-color-background-alt);
}

.atm-card--brand {
	background: var(--atm-color-primary);
	color: var(--atm-color-white);
}

.atm-card--brand :is(h1, h2, h3, h4, h5, h6) {
	color: var(--atm-color-white);
}

/* -------------------------------------------------------------------------- */
/* Image treatments (base)                                                    */
/* The `img.` form intentionally beats single-class block image selectors so  */
/* a chosen treatment always wins regardless of stylesheet load order.        */
/* -------------------------------------------------------------------------- */

.atm-image--default,
img.atm-image--default {
	border-radius: var(--atm-radius-image);
}

.atm-image--rounded,
img.atm-image--rounded {
	border-radius: var(--atm-radius-image);
}

.atm-image--framed,
img.atm-image--framed {
	border-radius: var(--atm-radius-image);
	border: 1px solid var(--atm-color-border);
	padding: var(--atm-space-xs);
	background: var(--atm-color-surface);
	box-shadow: var(--atm-shadow-card);
}

.atm-image--circle,
img.atm-image--circle {
	border-radius: 50%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.atm-image--full-bleed,
img.atm-image--full-bleed {
	border-radius: 0;
	width: 100%;
}

.atm-image--overlap,
img.atm-image--overlap {
	border-radius: var(--atm-radius-image);
	box-shadow: var(--atm-shadow-image);
}

/* -------------------------------------------------------------------------- */
/* Typography helpers                                                          */
/* -------------------------------------------------------------------------- */

.atm-heading {
	font-family: var(--atm-font-heading);
	font-weight: var(--atm-heading-weight);
	line-height: var(--atm-heading-line-height);
	color: var(--atm-color-secondary);
}

.atm-intro {
	font-size: var(--atm-fs-large);
	color: var(--atm-color-text-muted);
}

.atm-body {
	font-family: var(--atm-font-body);
	color: var(--atm-color-text);
	line-height: var(--atm-body-line-height);
}

.atm-muted {
	color: var(--atm-color-text-muted);
}

/* -------------------------------------------------------------------------- */
/* Accent overlay layer (hero / content-split decorative script accents)       */
/* -------------------------------------------------------------------------- */

.atm-accent-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 2;
	overflow: hidden;
}

.atm-accent-overlay__image {
	position: absolute;
	inset: auto auto 8% 6%;
	width: min(42%, 14rem);
	height: auto;
	opacity: 0.95;
}

.atm-accent-overlay__text {
	position: absolute;
	font-family: var(--atm-font-accent, cursive, "Segoe Script", "Brush Script MT", Georgia, serif);
	font-size: clamp(1.25rem, 3.5vw, 2.5rem);
	font-weight: 700;
	line-height: 1;
	color: var(--atm-color-accent);
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
	transform: rotate(-8deg);
}

.atm-accent-overlay__text--primary {
	top: 10%;
	right: 8%;
}

.atm-accent-overlay__text--secondary {
	bottom: 14%;
	left: 10%;
	transform: rotate(6deg);
	color: var(--atm-color-white);
}

@media (prefers-reduced-motion: reduce) {
	.atm-accent-overlay__text {
		transform: none;
	}
}