/**
 * Global styles — design tokens from Pencil (`LIV - Working.pen`, get_variables).
 * Use var(--token-name) in blocks / theme overrides.
 */



:root {
	/* Accent */
	--color-accent-blush: #e8a0d8;
	--color-accent-magenta: #d741b7;
	--color-accent-purple: #7c3aad;

	/* Surfaces */
	--color-background: var(--color-dark-obsidian);
	--color-neutral-pearl: #f7f5f3;
	--color-neutral-linen: #ede9e4;
	--color-neutral-grey: #b5b6b7;

	/* Dark / contrast */
	--color-dark-obsidian: #0c0c0e;
	--color-dark-dusk: #17111f;
	--color-dark-midnight: #2d1b3d;
	--color-neutral-slate: #3d3a42;

	/* Text */
	--color-text: #1a1820;
	--color-text-ink: #1a1820;
	--color-text-graphite: #5a5663;
	--color-text-cloud: var(--color-text-white, #ffffff);
	--color-text-white: #ffffff;
	--color-muted: #5a5663;

	/* Radius (px) */
	--radius-2: 2px;
	--radius-4: 4px;

	/* Layout — max width for inner content (matches Pencil brand guidelines frame) */
	--layout-max-content-width: 1440px;

	/* Typography — families */
	--font-family-body: "DM Sans", system-ui, sans-serif;
	--font-family-display: "Playfair Display", Georgia, "Times New Roman", serif;

	/* Typography — heading sizes (px) */
	--font-size-heading-display-xl: 64px;
	--font-size-heading-display-lg: 56px;
	--font-size-heading-display-md: 52px;
	--font-size-heading-h1: 48px;
	--font-size-heading-h2: 36px;
	--font-size-heading-h3: 28px;
	--font-size-heading-h3-small: 22px;
	--font-size-heading-h4: 26px;
	--font-size-heading-h5: 20px;
	--font-size-heading-h6: 18px;

	/* Typography — fluid heading scale (h1 / hero-h1 / h2 share one size; h3–h6 step down) */
	--font-size-fluid-h1: clamp(1.4375rem, 0.9375rem + 1.5vw, 2.375rem);
	--font-size-fluid-hero-h1: var(--font-size-fluid-h1);
	--font-size-fluid-h2: var(--font-size-fluid-h1);
	--font-size-fluid-h3: clamp(1.0625rem, 0.625rem + 1.2vw, 1.625rem);
	--font-size-fluid-h3-small: clamp(1rem, 0.5625rem + 0.85vw, 1.25rem);
	--font-size-fluid-h4: clamp(0.9375rem, 0.5rem + 0.9vw, 1.1875rem);
	--font-size-fluid-h5: clamp(0.875rem, 0.5rem + 0.75vw, 1.125rem);
	--font-size-fluid-h6: clamp(0.8125rem, 0.4375rem + 0.65vw, 1rem);

	/* Decorative display type — stats / step numbers, not semantic headings */
	--font-size-fluid-display-xl: clamp(2rem, 1rem + 4vw, 3.5rem);
	--font-size-fluid-display-lg: clamp(1.75rem, 0.875rem + 2.75vw, 3rem);
	--font-size-fluid-display-md: clamp(1.5rem, 0.75rem + 2.5vw, 2.75rem);

	/* Layout spacing (CTA, grids, etc.) */
	--liv-gap-md: 1rem;
	--liv-gap-lg: 1.5rem;
	--liv-gap-xl: 2rem;
	--liv-gap-col-wide: 3rem;
	--liv-space-btn-y: 0.7rem;
	--liv-space-btn-x: 1.2rem;
	--liv-space-panel-y: 2rem;
	--liv-space-panel-x: 2rem;
}@media (min-width: 1440px){:root {
		--font-size-fluid-h1: clamp(2.125rem, 1.625rem + 0.85vw, 3rem);
		--font-size-fluid-hero-h1: var(--font-size-fluid-h1);
		--font-size-fluid-h2: var(--font-size-fluid-h1);
		--font-size-fluid-h3: clamp(1.875rem, 1.5rem + 0.65vw, 2.25rem);
		--font-size-fluid-h3-small: clamp(1.5rem, 1.25rem + 0.5vw, 1.75rem);
		--font-size-fluid-h4: clamp(1.375rem, 1.125rem + 0.45vw, 1.625rem);
		--font-size-fluid-h5: clamp(1.25rem, 1rem + 0.35vw, 1.5rem);
		--font-size-fluid-h6: clamp(1.125rem, 0.9375rem + 0.3vw, 1.375rem);
		--font-size-fluid-display-xl: clamp(4rem, 3rem + 2vw, 5rem);
		--font-size-fluid-display-lg: clamp(3.5rem, 2.75rem + 1.5vw, 4.5rem);
		--font-size-fluid-display-md: clamp(3.25rem, 2.5rem + 1.25vw, 4.25rem);
	}}

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

body {
	margin: 0;
	font-family: var(--font-family-body);
	font-size: 100%;
	line-height: 1.5;
	color: var(--color-text-white);
	background-color: var(--color-background);
	-webkit-font-smoothing: antialiased;
}

/* Anchor links — smooth in-page scroll */
html {
	scroll-behavior: smooth;
}@media (prefers-reduced-motion: reduce){html {
		scroll-behavior: auto;
	}}

html.skylit-modal-open .liv-header {
	padding-right: var(--skylit-modal-scrollbar-gap, 0);
}