/* The brand's shared element styles — reset, ground, focus ring, links, the
   wordmark, the footer treatment. Consumed exactly like tokens.css (which must
   be loaded first): the marketing site links it, the app bundles it. Page
   layout stays with each surface; only what every Lido page shows belongs here. */

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

body {
	margin: 0;
	background: var(--bone);
	color: var(--ink);
	font:
		400 16px / 1.5 ui-sans-serif,
		-apple-system,
		"SF Pro Text",
		system-ui,
		sans-serif;
	-webkit-font-smoothing: antialiased;
}

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
	border-radius: 4px;
}

a {
	color: var(--accent);
}

.wordmark {
	margin: 0;
	font-family: var(--serif);
	font-size: 27px;
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--ink);
}

.wordmark span {
	color: var(--accent);
}

.foot {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 20px;
	border-top: 1px solid var(--line);
	color: var(--muted);
	font-size: 14px;
}

.foot p {
	margin: 0;
}

.foot .wordmark {
	font-size: 20px;
	margin-right: auto;
}