/**
 * ATM Site Factory — Design Tokens (default layer).
 *
 * This is the single source of truth for the DEFAULT design system. Every
 * --atm-* custom property used by blocks and components is declared here with a
 * safe default value.
 *
 * The Brand Pack (config/brand.json) overrides any subset of these tokens at
 * runtime via an inline <style> block injected right after this file (see
 * inc/brand-pack.php). Because that override targets the same :root properties,
 * it always wins — so a brand can re-skin the entire site without touching any
 * block CSS.
 *
 * Load order (see inc/assets.php): main.css → tokens.css → [brand inline] →
 * components.css → variants.css → brand.css → recipes.css. tokens.css therefore
 * intentionally redefines the base palette so the design layer (not theme.json
 * presets) is the source of truth for the rendered frontend.
 *
 * Both the legacy short names (--atm-color-bg) and the Brand Pack names
 * (--atm-color-background / --atm-color-surface) are defined and kept in sync so
 * existing block CSS keeps working.
 */

:root {
	/* --- Colours ---------------------------------------------------------- */
	--atm-color-primary: #1f5eff;
	--atm-color-primary-dark: #163fb0;
	--atm-color-secondary: #0f1b2d;
	--atm-color-accent: #ff7a45;
	--atm-color-text: #1a1f29;
	--atm-color-text-muted: #5b6573;
	--atm-color-border: #dfe3ec;
	--atm-color-white: #ffffff;
	--atm-color-black: #0a0d12;

	/* Background + surface (Brand Pack names) with legacy aliases kept in sync */
	--atm-color-background: #ffffff;
	--atm-color-background-alt: #f4f6fb;
	--atm-color-surface: #ffffff;
	--atm-color-bg: var(--atm-color-background);
	--atm-color-bg-alt: var(--atm-color-background-alt);

	/* --- Typography ------------------------------------------------------- */
	--atm-font-body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--atm-font-heading: var(--atm-font-body);
	/* Legacy alias used by older block CSS. */
	--atm-font-base: var(--atm-font-body);

	--atm-heading-weight: 700;
	--atm-body-weight: 400;
	--atm-heading-line-height: 1.2;
	--atm-body-line-height: 1.6;

	--atm-fs-small: 0.875rem;
	--atm-fs-base: 1rem;
	--atm-fs-large: 1.25rem;
	--atm-fs-xl: 1.5rem;
	--atm-fs-2xl: 1.953rem;
	--atm-fs-3xl: 2.441rem;
	--atm-fs-4xl: 3.052rem;

	/* --- Spacing scale (legacy) ------------------------------------------ */
	--atm-space-xs: 0.5rem;
	--atm-space-sm: 0.75rem;
	--atm-space-md: 1.25rem;
	--atm-space-lg: 2rem;
	--atm-space-xl: 3rem;
	--atm-space-2xl: 4.5rem;
	--atm-space-3xl: 7rem;

	/* --- Section spacing rhythm (Brand Pack driven) ---------------------- */
	--atm-section-y: clamp(4rem, 8vw, 8rem);
	--atm-section-y-compact: clamp(2.5rem, 5vw, 4rem);
	--atm-section-y-spacious: clamp(5rem, 10vw, 10rem);
	--atm-container-x: clamp(1.25rem, 4vw, 3rem);
	--atm-grid-gap: clamp(1.5rem, 3vw, 3rem);

	/* --- Layout ---------------------------------------------------------- */
	--atm-content-width: 768px;
	--atm-wide-width: 1200px;
	--atm-container-padding: var(--atm-container-x);
	--atm-section-padding: var(--atm-section-y);

	/* --- Shape / radius -------------------------------------------------- */
	--atm-radius-button: 8px;
	--atm-radius-card: 14px;
	--atm-radius-image: 14px;
	--atm-radius-input: 8px;
	/* Legacy radius aliases. */
	--atm-radius: var(--atm-radius-card);
	--atm-radius-sm: var(--atm-radius-button);

	/* --- Effects --------------------------------------------------------- */
	--atm-shadow-card: 0 18px 45px rgba(15, 27, 45, 0.10);
	--atm-shadow-image: 0 24px 60px rgba(15, 27, 45, 0.14);
	/* Legacy shadow alias. */
	--atm-shadow: var(--atm-shadow-card);

	--atm-transition: 160ms ease;
}