/* Shared stylesheet for /privacy.html and /terms.html.
   Mirrors the landing (apps/web/src/app.css + routes/+page.svelte) so
   the doc pages feel like they belong to the same app. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@700;900&family=Lora:ital,wght@0,400;1,400&family=JetBrains+Mono&display=swap');

:root {
	--primary: #8B6914;
	--on-primary: #FFFFFF;
	--primary-container: #FFDEA1;
	--on-primary-container: #2C1F00;
	--background: #FAF8F5;
	--on-background: #1C1917;
	--surface: #FFFFFE;
	--surface-variant: #F0EBE4;
	--on-surface-variant: #4D4639;
	--outline: #7F7667;
	--outline-variant: #D0C7B7;
	--tertiary: #4E6B4A;

	--font-display: 'Playfair Display', Georgia, serif;
	--font-editorial: 'Lora', Georgia, serif;
	--font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--font-mono: 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
	:root {
		--primary: #E4C06A;
		--on-primary: #442D00;
		--primary-container: #5F4900;
		--on-primary-container: #FFDEA1;
		--background: #0F0E0C;
		--on-background: #E7E2DB;
		--surface: #1C1917;
		--surface-variant: #3C362A;
		--on-surface-variant: #D0C7B7;
		--outline: #9A8F7D;
		--outline-variant: #4D4639;
		--tertiary: #B5CDAD;
	}
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--background);
	color: var(--on-background);
	font-family: var(--font-ui);
	line-height: 1.65;
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
}

/* Sticky translucent nav — mirrors the landing */
.nav {
	position: sticky;
	top: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.85rem 1.5rem;
	background: color-mix(in srgb, var(--background) 82%, transparent);
	backdrop-filter: saturate(180%) blur(16px);
	-webkit-backdrop-filter: saturate(180%) blur(16px);
	border-bottom: 1px solid var(--outline-variant);
}
.nav .wordmark {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--on-background);
}
.nav .dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
.nav .luvia {
	font-family: var(--font-display);
	font-weight: 900;
	font-size: 1.15rem;
	letter-spacing: -0.01em;
}
.nav .spacer { flex: 1; }
.nav a.ghost {
	color: var(--on-surface-variant);
	font-size: 0.88rem;
	text-decoration: none;
	padding: 6px 10px;
	border-radius: 6px;
}
.nav a.ghost:hover {
	color: var(--on-background);
	background: color-mix(in srgb, var(--on-background) 5%, transparent);
}
.nav a.cta {
	background: var(--primary);
	color: var(--on-primary);
	padding: 8px 18px;
	border-radius: 999px;
	font-size: 0.88rem;
	font-weight: 600;
	text-decoration: none;
	transition: filter 0.2s ease;
}
.nav a.cta:hover { filter: brightness(0.92); }

/* Doc column */
main {
	max-width: 760px;
	margin: 0 auto;
	padding: 4rem 1.5rem 6rem;
}

/* Typography — Playfair for headings, Lora for lede, Inter for body */
h1 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(2.25rem, 5vw, 3.25rem);
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin: 0 0 0.5rem;
}
h2 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.5rem;
	letter-spacing: -0.01em;
	margin: 3rem 0 0.75rem;
	padding-bottom: 0.4rem;
	border-bottom: 1px solid var(--outline-variant);
}
h3 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.15rem;
	letter-spacing: -0.01em;
	margin: 1.75rem 0 0.5rem;
}
p { margin: 0 0 0.9rem; }
.lede {
	font-family: var(--font-editorial);
	font-style: italic;
	font-size: 1.25rem;
	color: var(--on-surface-variant);
	line-height: 1.5;
	margin: 0.5rem 0 1rem;
	max-width: 620px;
}
.updated {
	color: var(--on-surface-variant);
	font-size: 0.9rem;
	margin-bottom: 2.5rem;
}

a {
	color: var(--primary);
	text-decoration-color: color-mix(in srgb, var(--primary) 35%, transparent);
	text-underline-offset: 3px;
}
a:hover { text-decoration-color: var(--primary); }

ul, ol { padding-left: 1.4rem; margin: 0 0 1rem; }
li { margin-bottom: 0.4rem; }

code {
	background: var(--surface-variant);
	padding: 0.1rem 0.4rem;
	border-radius: 4px;
	font-size: 0.9em;
	font-family: var(--font-mono);
}

table {
	border-collapse: collapse;
	width: 100%;
	margin: 1rem 0;
	font-size: 0.95rem;
}
th, td {
	border: 1px solid var(--outline-variant);
	padding: 0.6rem 0.75rem;
	text-align: left;
	vertical-align: top;
}
th {
	background: var(--surface-variant);
	font-weight: 600;
}

/* TOC card — matches landing feature/pricing card treatment */
.toc {
	background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 4%, var(--surface)) 0%, var(--surface) 65%);
	border: 1px solid var(--outline-variant);
	padding: 1.5rem 1.75rem;
	border-radius: 16px;
	margin: 2rem 0 3rem;
}
.toc strong {
	display: block;
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: 0.72rem;
	color: var(--primary);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin-bottom: 0.75rem;
}
.toc ol {
	margin: 0;
	padding-left: 1.2rem;
}
.toc ol li {
	margin-bottom: 0.35rem;
	font-size: 0.95rem;
}
.toc ol a {
	color: var(--on-background);
	text-decoration: none;
}
.toc ol a:hover { color: var(--primary); }

.callout {
	border-left: 3px solid var(--tertiary);
	padding: 1rem 1.25rem;
	margin: 1.5rem 0;
	background: color-mix(in srgb, var(--tertiary) 7%, var(--background));
	border-radius: 0 12px 12px 0;
}

strong.upper { text-transform: uppercase; font-size: 0.95em; letter-spacing: 0.02em; }

hr { border: 0; border-top: 1px solid var(--outline-variant); margin: 2.5rem 0; }

/* Footer — mirrors landing footer */
footer.doc {
	max-width: 1120px;
	margin: 0 auto;
	padding: 2.5rem 1.5rem 2rem;
	border-top: 1px solid var(--outline-variant);
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	align-items: center;
	font-size: 0.85rem;
	color: var(--on-surface-variant);
}
footer.doc .foot-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
footer.doc .foot-brand .luvia {
	font-family: var(--font-display);
	font-weight: 900;
	font-size: 1rem;
	letter-spacing: -0.01em;
	color: var(--on-background);
}
footer.doc .foot-brand .dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
footer.doc .foot-links {
	display: flex;
	gap: 1.25rem;
	flex: 1;
}
footer.doc .foot-links a {
	color: var(--on-surface-variant);
	text-decoration: none;
}
footer.doc .foot-links a:hover { color: var(--primary); }
footer.doc small { color: var(--outline); font-size: 0.82rem; }

@media (max-width: 680px) {
	footer.doc {
		flex-direction: column;
		align-items: flex-start;
	}
}