/*
 * The same OFL files the Android client bundles, copied from
 * client/core/ui/src/main/assets/fonts. Still TTF: converting to woff2 is a W1
 * job and needs tooling this machine has not got.
 */
@font-face {
	font-family: Spectral; font-style: normal; font-weight: 400; font-display: swap;
	src: url("./fonts/spectral_regular.ttf") format("truetype");
}
@font-face {
	font-family: Spectral; font-style: italic; font-weight: 400; font-display: swap;
	src: url("./fonts/spectral_italic.ttf") format("truetype");
}
@font-face {
	font-family: Spectral; font-style: italic; font-weight: 300; font-display: swap;
	src: url("./fonts/spectral_light_italic.ttf") format("truetype");
}
@font-face {
	font-family: Karla; font-style: normal; font-weight: 200 800; font-display: swap;
	src: url("./fonts/karla.ttf") format("truetype-variations");
}

/*
 * Broadsheet, transcribed from client/core/ui/.../theme/Colors.kt and Type.kt.
 * The design frame is 412 px and the Compose sizes are the design's px values
 * used 1:1 as sp, so every size here is the same number in px. Nothing is
 * invented: if a value is not in the Kotlin, it does not belong here.
 */
:root {
	--paper: #f5f2ea;
	--ink: #101828;
	--muted: #6b6f7b;
	--secondary: #3b3f4a;
	--faint: #9a9ea8;
	--reader-paper: #fbf8f1;
	--reader-ink: #1b1f2a;
	--accent: #5b3fb8; /* violet, the default after the 2026-09-06 revision */
	--saved: #2f7d5b;
	--on-accent: var(--paper);

	--rule: color-mix(in srgb, var(--ink) 25%, transparent);
	--hairline: color-mix(in srgb, var(--ink) 12%, transparent);
	--hairline-soft: color-mix(in srgb, var(--ink) 8%, transparent);
	--hover: color-mix(in srgb, var(--ink) 3%, transparent);
	--accent-tint: color-mix(in srgb, var(--accent) 18%, transparent);

	--serif: Spectral, Georgia, "Times New Roman", serif;
	--sans: Karla, ui-sans-serif, system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
	:root {
		--paper: #14171f;
		--ink: #e8e4da;
		--muted: #9a96a8;
		--secondary: #c9c4b8;
		--faint: #6e6a7a;
		--reader-paper: #171a22;
		--reader-ink: #e8e4da;
		--accent: #a78bfa; /* the night twin; violet reads 2.5:1 on this ground */
		--on-accent: #14171f;
		--hairline: color-mix(in srgb, var(--ink) 14%, transparent);
		--hairline-soft: color-mix(in srgb, var(--ink) 10%, transparent);
		--hover: color-mix(in srgb, var(--ink) 5%, transparent);
	}
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--serif);
	font-size: 17px;
	line-height: 25px;
	-webkit-text-size-adjust: 100%;
	padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}