/* ==========================================================================
   Design tokens — sampled from homepage-ref.png
   ========================================================================== */

:root {
	/* Surfaces */
	--bj-bg: #0a0a0e;
	--bj-surface: #111015;
	--bj-surface-2: #17161b;
	--bj-surface-3: #242327;

	/* Brand */
	--bj-red: #e5012c;
	--bj-lime: #cef134;
	--bj-lime-hover: #dcf95e;

	/* Text */
	--bj-text: #e2e2e3;
	--bj-text-strong: #ffffff;
	--bj-text-muted: #a2a2a4;

	/* Lines */
	--bj-border: rgba(226, 226, 227, 0.12);
	--bj-border-strong: rgba(226, 226, 227, 0.22);

	/* Layout */
	--bj-header-height: 60px;
	--bj-sidebar-width: 120px;
	--bj-container: 1200px;
	--bj-gutter: 44px;

	/* Radii */
	--bj-radius-pill: 999px;
	--bj-radius-md: 10px;

	/* Type */
	--bj-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		Helvetica, Arial, sans-serif;

	/* Motion */
	--bj-transition: 160ms ease;

	/* Elevation */
	--bj-z-header: 1000;
}

@media (max-width: 1024px) {
	:root {
		--bj-gutter: 20px;
		--bj-header-height: 56px;
	}
}