/*
 * Styles shared by the Thymeleaf pages and the Vaadin app.
 *
 * Values come from tokens.css - never a literal colour, size or font here.
 */

body {
	margin: 0;
	background: var(--ta-color-bg);
	color: var(--ta-color-text);
	font-family: var(--ta-font-family);
	font-size: var(--ta-font-size-m);
	line-height: var(--ta-line-height-body);
}

.page {
	max-width: var(--ta-content-max-width);
	margin: 0 auto;
	padding: var(--ta-space-l) var(--ta-space-m) var(--ta-space-xl);
}

.page h1 {
	font-size: var(--ta-font-size-xxl);
	line-height: var(--ta-line-height-tight);
	margin: 0 0 var(--ta-space-m);
}

.page h2 {
	font-size: var(--ta-font-size-l);
	line-height: var(--ta-line-height-tight);
	margin: var(--ta-space-l) 0 var(--ta-space-s);
}

.lede {
	font-size: var(--ta-font-size-l);
	color: var(--ta-color-text-secondary);
}

.button {
	display: inline-block;
	padding: var(--ta-space-s) var(--ta-space-m);
	border-radius: var(--ta-radius-m);
	background: var(--ta-color-primary);
	color: var(--ta-color-primary-text);
	text-decoration: none;
}

.button:hover {
	background: var(--ta-color-primary-hover);
}

.site-footer {
	max-width: var(--ta-content-max-width);
	margin: 0 auto;
	padding: var(--ta-space-m);
	border-top: 1px solid var(--ta-color-border);
	color: var(--ta-color-text-secondary);
	font-size: var(--ta-font-size-s);
}

.site-footer a {
	color: inherit;
	margin-right: var(--ta-space-m);
}