/* kozo design tokens. DESIGN-DNA §1 (Look): the palette is used exactly, in
   both themes. The theme follows the system; data-theme on <html> overrides it. */

@font-face {
	font-family: 'Newsreader';
	src: url('fonts/Newsreader-Roman.woff2') format('woff2');
	font-weight: 200 800;
	font-style: normal;
	font-display: block;
}
@font-face {
	font-family: 'Newsreader';
	src: url('fonts/Newsreader-Italic.woff2') format('woff2');
	font-weight: 200 800;
	font-style: italic;
	font-display: block;
}
@font-face {
	font-family: 'IBM Plex Mono';
	src: url('fonts/IBMPlexMono-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: block;
}
@font-face {
	font-family: 'IBM Plex Mono';
	src: url('fonts/IBMPlexMono-Medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: block;
}

@font-face {
	font-family: 'Manrope';
	src: url('fonts/Manrope.woff2') format('woff2');
	font-weight: 200 800;
	font-style: normal;
	font-display: block;
}

:root {
	/* light */
	--bg: #f3eee4; /* paper */
	--surface: #fbf8f1;
	--sunk: #e9e2d5;
	--ink: #1e1a16;
	--muted: #5e564d;
	--rule: #d8cdbb;
	--field: #8c8173; /* field border */
	--accent: #8a2b1f; /* oxblood */
	--accent-soft: #f1e1d9;
	--mark: #f2d9a6;
	--error: #8a2b1f;
	/* from the prototype: filled buttons and the snackbar, the warm scrim, shadows */
	--btn: #1e1a16;
	--btn-ink: #fbf8f1;
	--scrim: rgb(52 36 24 / 0.3);
	--shadow: rgb(30 26 22 / 0.16);
	color-scheme: light;

	/* type */
	--serif: 'Newsreader', 'Iowan Old Style', Georgia, 'Noto Serif', serif;
	/* Settings only (owner ruling 2026-10-16): the system-app face; notes and the book stay Newsreader */
	--sans: 'Manrope', ui-sans-serif, -apple-system, system-ui, sans-serif;
	--mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
	/* text scale: root size / 16px (17px on iOS), set at runtime by textScale.ts */
	--ts: 1;
	/* display type grows at half the rate of body text (32px at 100%, 48px at 200%) */
	--half: calc((1 + (var(--ts) - 1) * 0.5) / var(--ts));

	/* a note in the stream and in the composer: one size and leading, so a sent note
	   settles into its row without reflowing (DESIGN-DNA §4.4) */
	--note-size: 1.0625rem;
	--note-lead: 1.45;

	/* layout */
	--col: 640px;
	--gutter: 16px;

	/* shape */
	--r-card: 6px; /* cards and chips */
	--r-control: 8px; /* buttons and fields */
	--r-group: 10px; /* a grouped list (Settings) */
	--r-sheet: 14px; /* a sheet's top corners */
	--tap: 44px; /* every control is at least 44×44 */
	--ring: 2px;
	/* one hairline for every rule, separator and outline: a device pixel's worth on a sharp
	   screen (1/3 pt reads as iOS's own separators), 1px where a half pixel would vanish */
	--hair: 1px;

	/* spacing: one 4-point rhythm (polish pass). Padding and gaps come from here. */
	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-5: 20px;
	--sp-6: 24px;
	--sp-8: 32px;
	--sp-10: 40px;

	/* type scale, in rem so Dynamic Type moves it all (17px body on iOS) */
	--t-label: 0.75rem; /* capitals, tracked */
	--t-small: 0.8125rem; /* mono dates and counts */
	--t-sub: 0.9375rem; /* one-line hints */
	--t-body: 1rem;
	--t-row: 1.0625rem; /* a row's name, a note */
	--t-lead: 1.125rem; /* a shelf's name */
	--t-head: max(calc(1.25rem * var(--half)), calc(1.125rem + 2px)); /* a sheet's heading */
	--t-title: calc(2rem * var(--half)); /* the h1 */

	/* controls */
	--glyph: max(20px, 1.25rem); /* an icon's drawn size; its button is 44×44 */
	--btn-h: max(var(--tap), 2.75rem); /* the one button height */

	/* motion (owner ruling, polish pass): short and calm, never bouncy, nothing under the
	   finger, nothing at all under reduced motion. motion.ts reads the same values. */
	--dur-press: 120ms;
	--dur-fast: 160ms;
	--dur-base: 220ms;
	--dur-page: 300ms;
	--ease-out: cubic-bezier(0.2, 0, 0, 1);
	/* a sheet or a page: quick to start, long to settle, no overshoot (the system's own feel) */
	--ease-glide: cubic-bezier(0.32, 0.72, 0, 1);
}

@media (min-resolution: 2dppx) {
	:root {
		--hair: 0.5px;
	}
}

@media (min-width: 480px) {
	:root {
		--gutter: 24px;
	}
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme='light']) {
		--bg: #1a1714;
		--surface: #24201c;
		--sunk: #2e2924;
		--ink: #ede5d8;
		--muted: #b0a596;
		--rule: #433b33;
		--field: #7d7366;
		--accent: #d9a27e; /* terracotta */
		--accent-soft: #3a2a20;
		--mark: #5a4520;
		--error: #e8a08f;
		--btn: #ede5d8;
		--btn-ink: #1a1714;
		--scrim: rgb(0 0 0 / 0.55);
		--shadow: rgb(0 0 0 / 0.5);
		color-scheme: dark;
	}
}

:root[data-theme='dark'] {
	--bg: #1a1714;
	--surface: #24201c;
	--sunk: #2e2924;
	--ink: #ede5d8;
	--muted: #b0a596;
	--rule: #433b33;
	--field: #7d7366;
	--accent: #d9a27e;
	--accent-soft: #3a2a20;
	--mark: #5a4520;
	--error: #e8a08f;
	--btn: #ede5d8;
	--btn-ink: #1a1714;
	--scrim: rgb(0 0 0 / 0.55);
	--shadow: rgb(0 0 0 / 0.5);
	color-scheme: dark;
}