/* Bookie design tokens — Vellum direction.
 *
 * Picked Phase 6.2 over Reading Room. Dark warm-ink ground with aged-brass
 * accent; oxblood retired from filled chips to a single left-edge bar on
 * upcoming book rows. The icon's candlelight radial vignette top-right is
 * applied at the body level so the whole app sits inside the same
 * "library at night" feeling the icon already promised.
 *
 * Style ethos (unchanged from Burnished Gold v1):
 *   - Precision over gradients. Hairlines do most of the structural work.
 *   - Optical-size axis: Newsreader at the right `opsz` for each size.
 *   - Don't hardcode colors / sizes / spacing in component styles.
 *
 * Every component file references these vars.
 */

:root {
	/* ──── Color ──── */
	/* Ground: warm ink, no cool tint. The radial vignette is painted on
	 * `body` in base.css so background-color tokens stay flat-color values. */
	--c-bg: #0e0a06;
	--c-bg-deep: #060302; /* outermost falloff for the vignette */
	--c-bg-vignette: #1a1208; /* top-right glow color */

	--c-surface: #1a140e; /* card / panel */
	--c-surface-2: #221a12; /* elevated card / modal / hover lift */
	--c-border: #3a2a18; /* hairline (warm) */
	--c-border-strong: #5a4228; /* hairline used for focus / active surfaces */

	--c-fg: #e8dcc0; /* aged paper white — body text */
	--c-fg-muted: #a08868; /* secondary text */
	--c-fg-dim: #9a8870; /* tertiary / labels / mono metadata — bumped to clear AA against #0e0a06 at 11–13 px (Phase 6.7) */
	--c-fg-faint: #7a6850; /* quietest readable text (signout / hint copy) — used sparingly */

	--c-accent: #c4a060; /* aged brass — the operative accent */
	--c-accent-hover: #e8c878; /* brighter brass on hover / active */
	--c-accent-dim: #8e6e3a;

	--c-oxblood: #7a1a14; /* retired to upcoming left-edge bar only */
	--c-oxblood-hover: #9c2520;

	--c-success: #7a9a6a; /* dustier than v1 to fit the palette */
	--c-danger: #b85a4a; /* used sparingly — unfollow, destructive actions */

	/* ──── Type ──── */
	--f-serif: 'Newsreader', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
	--f-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
	/* Display face for the wordmark only. Fraunces has a dramatic
	 * optical-size axis + a "wonk" axis for a hand-cut, slightly
	 * irregular feel — pairs with the tattered-books icon. Stays
	 * out of body / heading copy. */
	--f-display: 'Fraunces', 'Newsreader', Georgia, serif;

	--t-xs: 0.6875rem; /* 11px — mono / small-caps labels */
	--t-sm: 0.8125rem; /* 13px — mono / small-caps metadata */
	--t-base: 0.9375rem; /* 15px — body */
	--t-md: 1.0625rem; /* 17px — body-large */
	--t-lg: 1.375rem; /* 22px — section heading */
	--t-xl: 1.75rem; /* 28px — page title */
	--t-2xl: 2.25rem; /* 36px — wordmark */

	--lh-tight: 1.2;
	--lh-snug: 1.35;
	--lh-body: 1.55; /* slightly opened up vs v1 for a more book-page feel */

	--w-regular: 400;
	--w-medium: 500;
	--w-semibold: 600;

	/* ──── Spacing (4px scale, unchanged from v1) ──── */
	--s-1: 0.25rem; /* 4px */
	--s-2: 0.5rem; /* 8px */
	--s-3: 0.75rem; /* 12px */
	--s-4: 1rem; /* 16px */
	--s-5: 1.25rem; /* 20px */
	--s-6: 1.5rem; /* 24px */
	--s-8: 2rem; /* 32px */
	--s-10: 2.5rem; /* 40px */
	--s-12: 3rem; /* 48px */
	--s-16: 4rem; /* 64px */

	/* ──── Radius — kept tight; books and pages don't have rounded edges. ──── */
	--r-0: 0;
	--r-1: 2px;
	--r-2: 4px;

	/* ──── Motion ──── */
	--motion-fast: 120ms ease;
	--motion-slow: 200ms ease;

	/* ──── Layout ──── */
	--content-max: 38rem; /* ~608px — readable column on mobile and desktop */
}