/**
 * Density modes — radical-restructure session.
 *
 * Three modes, all switched by `body[data-density="…"]`:
 *
 *   compact     — newsroom-floor density, tighter card padding,
 *                 smaller line-heights, more on-screen at once.
 *   comfortable — default reader density (no overrides).
 *   spacious    — readability mode, wider line-heights, more
 *                 whitespace, larger touch targets.
 *
 * Toggled from /settings (or the per-page density switcher).
 * The default body has `data-density="comfortable"` so no class
 * application equals the historical layout — no surprise resize
 * on the first deploy.
 *
 * Why CSS custom properties + a data-attr rather than Tailwind
 * variants: the value gets re-read everywhere the property is
 * used (.rounded-card padding, .prose line-height, etc.) without
 * having to enumerate every component. Compact-mode editors get
 * the dense view; readability-mode readers get the spacious one;
 * both for free across every surface that uses the tokens.
 */

:root {
	/* Comfortable defaults — these are what every card / prose
	 * block reads when no data-density overrides apply. */
	--card-pad: 1rem;
	--card-pad-tight: 0.75rem;
	--row-gap: 0.75rem;
	--prose-leading: 1.6;
	--prose-size: 15.5px;
	--touch-min: 44px;
}

body[data-density="compact"] {
	--card-pad: 0.625rem;
	--card-pad-tight: 0.5rem;
	--row-gap: 0.5rem;
	--prose-leading: 1.45;
	--prose-size: 14.5px;
	--touch-min: 36px;
}

body[data-density="spacious"] {
	--card-pad: 1.5rem;
	--card-pad-tight: 1.125rem;
	--row-gap: 1.25rem;
	--prose-leading: 1.75;
	--prose-size: 17px;
	--touch-min: 52px;
}

/* Apply the tokens to the surfaces that should actually move
 * across modes. The shared `.rounded-card` is the load-bearing
 * primitive on every reader card; once it reads --card-pad, the
 * whole platform breathes with density. */
.rounded-card {
	padding: var(--card-pad);
}

.rounded-card-tight {
	padding: var(--card-pad-tight);
}

.prose-density {
	line-height: var(--prose-leading);
	font-size: var(--prose-size);
}

/* Density toggle — utility class for the per-page switcher. The
 * settings page renders three buttons with this class so the
 * client can flip data-density without a full page reload. */
.density-toggle[data-active="true"] {
	background: var(--color-ink, #10141a);
	color: var(--color-surface, #f7f2e8);
}