/* Generated from public/brand/tokens.json by tools/build-tokens.php. Do not edit by hand. */

:root {
	--atr-amber: #F2A33A;
	--atr-sage: #8DB6A0;
	--atr-rust: #A8412C;
	--atr-paper: #F2E8D5;
	--atr-slate: #1E2A2F;
	--atr-brand: var(--atr-amber);
	--atr-on-brand: var(--atr-slate);
	--atr-accent: var(--atr-rust);
	--atr-on-accent: var(--atr-paper);
	--atr-series-1: var(--atr-amber);
	--atr-on-series-1: var(--atr-slate);
	--atr-series-2: var(--atr-sage);
	--atr-on-series-2: var(--atr-slate);
	--atr-series-3: var(--atr-rust);
	--atr-on-series-3: var(--atr-paper);

	--atr-font-display: "Zilla Slab", Georgia, serif;
	--atr-font-body: Karla, system-ui, sans-serif;
	--atr-fs-display-xl: clamp(48px, 7vw, 84px);
	--atr-lh-display-xl: 0.952;
	--atr-fw-display-xl: 700;
	--atr-ls-display-xl: -0.01em;
	--atr-fs-h1: clamp(34px, 4vw, 48px);
	--atr-lh-h1: 1.083;
	--atr-fw-h1: 700;
	--atr-ls-h1: normal;
	--atr-fs-h2: clamp(26px, 2.667vw, 32px);
	--atr-lh-h2: 1.188;
	--atr-fw-h2: 700;
	--atr-ls-h2: normal;
	--atr-fs-h3: 24px;
	--atr-lh-h3: 1.25;
	--atr-fw-h3: 600;
	--atr-ls-h3: normal;
	--atr-fs-body-lg: 19px;
	--atr-lh-body-lg: 1.526;
	--atr-fw-body-lg: 400;
	--atr-ls-body-lg: normal;
	--atr-fs-body: 17px;
	--atr-lh-body: 1.529;
	--atr-fw-body: 400;
	--atr-ls-body: normal;
	--atr-fs-caption: 14px;
	--atr-lh-caption: 1.429;
	--atr-fw-caption: 600;
	--atr-ls-caption: normal;
	--atr-fs-label: 13px;
	--atr-lh-label: 1.231;
	--atr-fw-label: 700;
	--atr-ls-label: 0.1em;

	--atr-space-1: 4px;
	--atr-space-2: 8px;
	--atr-space-3: 12px;
	--atr-space-4: 16px;
	--atr-space-5: 20px;
	--atr-space-6: 24px;
	--atr-space-8: 32px;
	--atr-space-12: 48px;
	--atr-space-14: 56px;
	--atr-radius-sm: 2px;
	--atr-radius-md: 8px;
	--atr-radius-die: 27%;
}

/* Dark theme: slate ground. */
:root,
:root[data-theme="dark"] {
	--atr-surface: var(--atr-slate);
	--atr-ink: var(--atr-paper);
	--atr-ink-muted: #f2e8d5b3;
	--atr-hairline: #f2e8d540;
	color-scheme: dark;
}

/* Light theme: paper ground. */
@media (prefers-color-scheme: light) {
	:root:not([data-theme="dark"]) {
		--atr-surface: var(--atr-paper);
		--atr-ink: var(--atr-slate);
		--atr-ink-muted: #1e2a2fb3;
		--atr-hairline: #1e2a2f40;
		color-scheme: light;
	}
}
:root[data-theme="light"] {
	--atr-surface: var(--atr-paper);
	--atr-ink: var(--atr-slate);
	--atr-ink-muted: #1e2a2fb3;
	--atr-hairline: #1e2a2f40;
	color-scheme: light;
}

/* Type styles. .atr-type-* sets the whole style; .has-*-font-size (from the editor) adds line height and tracking. */
.atr-type-display-xl {
	font-family: var(--atr-font-display);
	font-size: var(--atr-fs-display-xl);
	line-height: var(--atr-lh-display-xl);
	font-weight: var(--atr-fw-display-xl);
	letter-spacing: var(--atr-ls-display-xl);
}
.has-display-xl-font-size { line-height: var(--atr-lh-display-xl); letter-spacing: var(--atr-ls-display-xl); }
.atr-type-h1 {
	font-family: var(--atr-font-display);
	font-size: var(--atr-fs-h1);
	line-height: var(--atr-lh-h1);
	font-weight: var(--atr-fw-h1);
	letter-spacing: var(--atr-ls-h1);
}
.has-heading-1-font-size { line-height: var(--atr-lh-h1); letter-spacing: var(--atr-ls-h1); }
.atr-type-h2 {
	font-family: var(--atr-font-display);
	font-size: var(--atr-fs-h2);
	line-height: var(--atr-lh-h2);
	font-weight: var(--atr-fw-h2);
	letter-spacing: var(--atr-ls-h2);
}
.has-heading-2-font-size { line-height: var(--atr-lh-h2); letter-spacing: var(--atr-ls-h2); }
.atr-type-h3 {
	font-family: var(--atr-font-display);
	font-size: var(--atr-fs-h3);
	line-height: var(--atr-lh-h3);
	font-weight: var(--atr-fw-h3);
	letter-spacing: var(--atr-ls-h3);
}
.has-heading-3-font-size { line-height: var(--atr-lh-h3); letter-spacing: var(--atr-ls-h3); }
.atr-type-body-lg {
	font-family: var(--atr-font-body);
	font-size: var(--atr-fs-body-lg);
	line-height: var(--atr-lh-body-lg);
	font-weight: var(--atr-fw-body-lg);
	letter-spacing: var(--atr-ls-body-lg);
}
.has-body-lg-font-size { line-height: var(--atr-lh-body-lg); letter-spacing: var(--atr-ls-body-lg); }
.atr-type-body {
	font-family: var(--atr-font-body);
	font-size: var(--atr-fs-body);
	line-height: var(--atr-lh-body);
	font-weight: var(--atr-fw-body);
	letter-spacing: var(--atr-ls-body);
}
.has-body-font-size { line-height: var(--atr-lh-body); letter-spacing: var(--atr-ls-body); }
.atr-type-caption {
	font-family: var(--atr-font-body);
	font-size: var(--atr-fs-caption);
	line-height: var(--atr-lh-caption);
	font-weight: var(--atr-fw-caption);
	letter-spacing: var(--atr-ls-caption);
}
.has-caption-font-size { line-height: var(--atr-lh-caption); letter-spacing: var(--atr-ls-caption); }
.atr-type-label {
	font-family: var(--atr-font-body);
	font-size: var(--atr-fs-label);
	line-height: var(--atr-lh-label);
	font-weight: var(--atr-fw-label);
	letter-spacing: var(--atr-ls-label);
	text-transform: uppercase;
}
.has-label-font-size { line-height: var(--atr-lh-label); letter-spacing: var(--atr-ls-label); }