/**
 * ATM Site Factory — global variant layer.
 *
 * Style variants (.atm-style--*) and spacing variants (.atm-spacing--*) are the
 * controlled, editor-selectable visual options. They set section background/text
 * and vertical rhythm from brand tokens, and ensure content stays readable on
 * coloured backgrounds (headings, eyebrows, muted text, cards, buttons, links).
 *
 * This file deliberately enumerates known block child elements so individual
 * block CSS does not need to repeat dark/soft-context rules.
 */

/* -------------------------------------------------------------------------- */
/* Style variants — base                                                      */
/* -------------------------------------------------------------------------- */

.atm-style--default {
	background-color: var(--atm-color-background);
	color: var(--atm-color-text);
}

.atm-style--light {
	background-color: var(--atm-color-surface);
	color: var(--atm-color-text);
}

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

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

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

.atm-style--accent {
	background-color: var(--atm-color-accent);
	color: var(--atm-color-white);
}

/* -------------------------------------------------------------------------- */
/* Coloured-context readability (brand / dark / accent)                       */
/* -------------------------------------------------------------------------- */

.atm-style--brand,
.atm-style--dark,
.atm-style--accent {
	color: var(--atm-color-white);
}

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

.atm-style--brand .atm-eyebrow,
.atm-style--dark .atm-eyebrow,
.atm-style--accent .atm-eyebrow {
	color: rgba(255, 255, 255, 0.82);
}

/* Muted / intro / body text reads as translucent white on coloured sections. */
.atm-style--brand :is(.atm-section-header__intro, .atm-hero__intro, .atm-content-split__body, .atm-benefits__desc, .atm-cards__desc, .atm-testimonials__role, .atm-testimonials__quote, .atm-cta__body, .atm-faq__answer-inner, .atm-logos__heading, .atm-muted, .atm-intro),
.atm-style--dark :is(.atm-section-header__intro, .atm-hero__intro, .atm-content-split__body, .atm-benefits__desc, .atm-cards__desc, .atm-testimonials__role, .atm-testimonials__quote, .atm-cta__body, .atm-faq__answer-inner, .atm-logos__heading, .atm-muted, .atm-intro),
.atm-style--accent :is(.atm-section-header__intro, .atm-hero__intro, .atm-content-split__body, .atm-benefits__desc, .atm-cards__desc, .atm-testimonials__role, .atm-testimonials__quote, .atm-cta__body, .atm-faq__answer-inner, .atm-logos__heading, .atm-muted, .atm-intro) {
	color: rgba(255, 255, 255, 0.85);
}

.atm-style--brand :is(.atm-testimonials__name),
.atm-style--dark :is(.atm-testimonials__name),
.atm-style--accent :is(.atm-testimonials__name) {
	color: var(--atm-color-white);
}

/* Links on coloured sections. */
.atm-style--brand a:not(.atm-button),
.atm-style--dark a:not(.atm-button),
.atm-style--accent a:not(.atm-button) {
	color: var(--atm-color-white);
	text-decoration: underline;
}

/* Cards / item surfaces on coloured sections become translucent. */
.atm-style--brand :is(.atm-card, .atm-benefits__item, .atm-testimonials__item, .atm-faq__item, .atm-cards__card),
.atm-style--dark :is(.atm-card, .atm-benefits__item, .atm-testimonials__item, .atm-faq__item, .atm-cards__card),
.atm-style--accent :is(.atm-card, .atm-benefits__item, .atm-testimonials__item, .atm-faq__item, .atm-cards__card) {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.18);
}

/* Secondary / ghost buttons need a light outline on coloured sections. */
.atm-style--brand .atm-button--secondary,
.atm-style--dark .atm-button--secondary,
.atm-style--accent .atm-button--secondary,
.atm-style--brand .atm-button--ghost,
.atm-style--dark .atm-button--ghost,
.atm-style--accent .atm-button--ghost {
	color: var(--atm-color-white);
	border-color: var(--atm-color-white);
	background: transparent;
}

.atm-style--brand .atm-button--secondary:hover,
.atm-style--dark .atm-button--secondary:hover,
.atm-style--accent .atm-button--secondary:hover,
.atm-style--brand .atm-button--ghost:hover,
.atm-style--dark .atm-button--ghost:hover,
.atm-style--accent .atm-button--ghost:hover {
	background: var(--atm-color-white);
	color: var(--atm-color-secondary);
}

/* Primary button on a brand/accent band: use light style for contrast. */
.atm-style--brand .atm-button--primary,
.atm-style--accent .atm-button--primary {
	background: var(--atm-color-white);
	color: var(--atm-color-primary);
	border-color: var(--atm-color-white);
}

.atm-style--brand .atm-button--primary:hover,
.atm-style--accent .atm-button--primary:hover {
	background: var(--atm-color-secondary);
	color: var(--atm-color-white);
	border-color: var(--atm-color-secondary);
}

/* -------------------------------------------------------------------------- */
/* Soft-context surfaces                                                       */
/* On a muted section, card surfaces lift to the surface colour.              */
/* -------------------------------------------------------------------------- */

.atm-style--soft :is(.atm-card, .atm-benefits__item, .atm-testimonials__item, .atm-faq__item, .atm-cards__card) {
	background: var(--atm-color-surface);
}

/* -------------------------------------------------------------------------- */
/* Spacing variants                                                            */
/* Override the default .atm-block vertical rhythm.                            */
/* -------------------------------------------------------------------------- */

.atm-spacing--compact {
	padding-block: var(--atm-section-y-compact);
}

.atm-spacing--standard {
	padding-block: var(--atm-section-y);
}

.atm-spacing--spacious {
	padding-block: var(--atm-section-y-spacious);
}

/* Brand-driven grid gap for repeater grids. */
.atm-grid {
	gap: var(--atm-grid-gap);
}

/* -------------------------------------------------------------------------- */
/* Background patterns (brand-token driven)                                   */
/* -------------------------------------------------------------------------- */

.atm-pattern--vertical-stripes {
	background-color: var(--atm-pattern-stripe-a, var(--atm-color-secondary));
	background-image: repeating-linear-gradient(
		90deg,
		var(--atm-pattern-stripe-a, var(--atm-color-secondary)) 0,
		var(--atm-pattern-stripe-a, var(--atm-color-secondary)) 14px,
		var(--atm-pattern-stripe-b, color-mix(in srgb, var(--atm-color-secondary) 82%, #000 18%)) 14px,
		var(--atm-pattern-stripe-b, color-mix(in srgb, var(--atm-color-secondary) 82%, #000 18%)) 28px
	);
}

:root {
	--atm-pattern-stripe-a: var(--atm-color-secondary);
	--atm-pattern-stripe-b: color-mix(in srgb, var(--atm-color-secondary) 82%, #000 18%);
}

.atm-pattern--vertical-stripes.atm-style--dark,
.atm-pattern--vertical-stripes.atm-style--brand {
	/* Pattern replaces flat fill; keep text contrast from style variant */
}