html {
	background-color: #f8fafc; /* --color-light-bg */
}

html.dark {
	background-color: #0b1120; /* --color-dark-bg */
}

body {
	font-family: "Nunito", sans-serif;
}

/* Grid is rendered via ::before so it never affects layout */
.main-grid-bg {
	position: relative;
}

/* Light mode: dashed grid with bottom radial fade */
.main-grid-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image:
		linear-gradient(to right, #e2e8f0 1px, transparent 1px),
		linear-gradient(to bottom, #e2e8f0 1px, transparent 1px);
	background-size: 20px 20px;
	background-position:
		0 0,
		0 0;
	-webkit-mask-image:
		repeating-linear-gradient(
			to right,
			black 0px,
			black 3px,
			transparent 3px,
			transparent 8px
		),
		repeating-linear-gradient(
			to bottom,
			black 0px,
			black 3px,
			transparent 3px,
			transparent 8px
		);
	mask-image:
		repeating-linear-gradient(
			to right,
			black 0px,
			black 3px,
			transparent 3px,
			transparent 8px
		),
		repeating-linear-gradient(
			to bottom,
			black 0px,
			black 3px,
			transparent 3px,
			transparent 8px
		);
	mask-composite: intersect;
	-webkit-mask-composite: source-in;
}

/* Dark mode: same mask, dimmer grid lines */
.dark .main-grid-bg::before {
	background-image:
		linear-gradient(to right, #374151 1px, transparent 1px),
		linear-gradient(to bottom, #374151 1px, transparent 1px);
}

/* Wrapper — add this class to the element the badge should anchor to */
.feature-badge-anchor {
	position: relative;
}

.feature-badge {
	position: absolute;
	top: -0.55rem;
	right: -0.4rem;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.65rem;
	font-weight: 700;
	padding: 0.15rem 0.55rem;
	border-radius: 9999px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
	user-select: none;
	pointer-events: none;
}

/* Coming Soon — purple → blue */
.feature-badge--coming-soon {
	background: linear-gradient(135deg, #7c3aed 0%, #3b82f6 100%);
	color: #fff;
	box-shadow:
		0 0 0 1px rgba(124, 58, 237, 0.25),
		0 2px 8px rgba(124, 58, 237, 0.35);
}

/* ERPNext Mode — blue → cyan */
.feature-badge--erpnext {
	background: linear-gradient(135deg, #1d4ed8 0%, #0891b2 100%);
	color: #fff;
	box-shadow:
		0 0 0 1px rgba(29, 78, 216, 0.25),
		0 2px 8px rgba(29, 78, 216, 0.35);
}

/* Dark mode — slightly brighter/glowier variants */
.dark .feature-badge--coming-soon {
	background: linear-gradient(135deg, #8b5cf6 0%, #60a5fa 100%);
	box-shadow:
		0 0 0 1px rgba(139, 92, 246, 0.3),
		0 2px 10px rgba(139, 92, 246, 0.5);
}

.dark .feature-badge--erpnext {
	background: linear-gradient(135deg, #3b82f6 0%, #22d3ee 100%);
	box-shadow:
		0 0 0 1px rgba(59, 130, 246, 0.3),
		0 2px 10px rgba(59, 130, 246, 0.5);
}