/**
 * Design tokens — layout, breakpoints, color, spacing.
 *
 * @font-face lives here so the block editor (tokens + editor.css) loads the font.
 *
 * Breakpoint vars are for reference and JS; use literal rem values in
 * @media and @container (custom properties are not valid there).
 *
 * Layout widths align with theme.json contentSize (720px) / wideSize (1200px).
 */

@font-face {
	font-family: 'CentSchbook Mono BT';
	src: url('../fonts/CenturySchoolbookBT-Monospace.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

:root {
	/* Layout */
	--content-width: 45rem;
	--wide-width: 75rem;

	/* Breakpoints — use literal values in @media / @container */
	--bp-sm: 40rem;
	--bp-md: 48rem;
	--bp-lg: 64rem;
	--bp-xl: 75rem;

	/* Color */
	--color-fg: #1a1a1a;
	--color-bg: #ffffff;
	--color-muted: #6b7280;
	--color-accent: #2563eb;

	/* Spacing */
	--space-xs: 0.5rem;
	--space-sm: 1rem;
	--space-md: 1.5rem;
	--space-lg: 2.5rem;
	--space-xl: 4rem;

	/* Typography */
	--font-sans: 'CentSchbook Mono BT', ui-monospace, 'Courier New', monospace;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}