/*
 * Páginas legais públicas: privacy-policy.html, terms-of-use.html e delete-account.html,
 * em /responsible/ (app dos pais) e /nanny/ (app da babá).
 * O visual espelha o componente LegalScreen dos apps — cores e tipografia vêm do
 * `theme` / StyleGuide de night-night-responsible-app/src/styles/StyleGuide.js.
 */

@font-face {
	font-family: "Lexend";
	font-weight: 400;
	font-display: swap;
	src: url("/fonts/Lexend-Regular.ttf") format("truetype");
}

@font-face {
	font-family: "Lexend";
	font-weight: 500;
	font-display: swap;
	src: url("/fonts/Lexend-Medium.ttf") format("truetype");
}

@font-face {
	font-family: "Lexend";
	font-weight: 600;
	font-display: swap;
	src: url("/fonts/Lexend-SemiBold.ttf") format("truetype");
}

@font-face {
	font-family: "Lexend";
	font-weight: 700;
	font-display: swap;
	src: url("/fonts/Lexend-Bold.ttf") format("truetype");
}

* {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	min-height: 100vh;
	background-color: #2C284D; /* theme.background */
	color: #FFFFFF;
	font-family: "Lexend", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
}

/*
 * Starfield — equivalente estático do AnimatedBackground dos apps: três camadas de
 * estrelas (pequenas/médias/grandes com brilho) desenhadas com radial-gradient, nas
 * mesmas cores do STAR_COLORS. Sem JS e sem asset de imagem.
 */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	background-image:
		radial-gradient(circle, rgba(255, 255, 255, 0.65) 1px, transparent 1.5px),
		radial-gradient(circle, rgba(201, 204, 230, 0.55) 1px, transparent 1.5px),
		radial-gradient(circle, rgba(231, 226, 255, 0.5) 1.5px, transparent 2px),
		radial-gradient(circle, rgba(218, 222, 240, 0.45) 1.5px, transparent 2px),
		radial-gradient(circle at center, rgba(255, 255, 255, 0.9) 2px, rgba(255, 255, 255, 0.12) 5px, transparent 14px),
		radial-gradient(circle at center, rgba(231, 226, 255, 0.8) 2px, rgba(231, 226, 255, 0.1) 5px, transparent 14px);
	background-size: 137px 149px, 211px 173px, 283px 251px, 331px 307px, 419px 389px, 487px 463px;
	background-position: 13px 27px, 91px 8px, 47px 133px, 173px 61px, 29px 211px, 241px 97px;
}

main {
	position: relative;
	max-width: 720px;
	margin: 0 auto;
	padding: 32px 20px 56px;
}

.logo {
	display: block;
	width: 160px;
	max-width: 100%;
	height: auto;
	margin-bottom: 32px;
}

h1 {
	margin: 0 0 20px;
	font-size: 24px;
	font-weight: 600;
	line-height: 32px;
}

.last-updated {
	margin: 0 0 24px;
	padding: 16px;
	border: 1px solid #7E7A9D; /* theme.surfaceBorder */
	border-radius: 12px;
	background-color: #3E396D; /* theme.primaryColor */
	color: #C3C2D2; /* theme.textMuted */
	font-size: 14px;
	line-height: 20px;
}

section {
	margin: 0 0 24px;
}

section:last-child {
	margin-bottom: 0;
}

h2 {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
}

section p {
	margin: 0 0 8px;
}

section p:last-child {
	margin-bottom: 0;
}

section ol,
section ul {
	margin: 0 0 8px;
	padding-left: 20px;
}

section li {
	margin-bottom: 4px;
}

section li:last-child {
	margin-bottom: 0;
}

a {
	color: #FFFFFF;
	text-decoration: underline;
}

footer {
	margin-top: 40px;
	color: #C3C2D2; /* theme.textMuted */
	font-size: 12px;
	line-height: 18px;
}