@charset "UTF-8";
/**
 * GenieBuilder — design token layer.
 * Every widget/block/page/template reads these; none hardcode values.
 * Kits reskin the whole family by overriding this set on a scoped root.
 */

:root {
	--mlsg-gb-color-surface: #ffffff;
	--mlsg-gb-color-text: #1a1a1a;
	--mlsg-gb-color-muted: #667085;
	--mlsg-gb-color-primary: var(--mlsg-teal, #107dbd);
	--mlsg-gb-color-border: #e5e7eb;
	--mlsg-gb-color-badge-bg: var(--mlsg-teal, #107dbd);
	--mlsg-gb-color-badge-text: #ffffff;
	--mlsg-gb-color-placeholder: #f2f4f7;
	/* Dark veil laid over a photo so text on it stays readable. */
	--mlsg-gb-color-scrim: rgba(17, 24, 39, 0.62);
	--mlsg-gb-color-on-scrim: #ffffff;

	--mlsg-gb-radius-card: 0.75rem;
	--mlsg-gb-radius-badge: 0.375rem;

	--mlsg-gb-space-xs: 0.25rem;
	--mlsg-gb-space-sm: 0.5rem;
	--mlsg-gb-space-md: 1rem;
	--mlsg-gb-space-lg: 1.5rem;

	--mlsg-gb-shadow-card: 0 1px 3px rgba(16, 24, 40, 0.1), 0 1px 2px rgba(16, 24, 40, 0.06);
	--mlsg-gb-shadow-card-hover: 0 8px 24px rgba(16, 24, 40, 0.12);
	--mlsg-gb-shadow-menu: 0 12px 32px rgba(16, 24, 40, 0.16), 0 2px 6px rgba(16, 24, 40, 0.08);

	/* Share destinations' own colours, each at least 3:1 on white. */
	--mlsg-gb-brand-facebook: #1877f2;
	--mlsg-gb-brand-x: #000000;
	--mlsg-gb-brand-linkedin: #0a66c2;
	--mlsg-gb-brand-pinterest: #e60023;
	--mlsg-gb-brand-whatsapp: #128c7e;

	--mlsg-gb-font-price: 1.25rem;
	--mlsg-gb-font-meta: 0.9375rem;
	--mlsg-gb-font-address: 0.9375rem;
	--mlsg-gb-font-badge: 0.75rem;

	/* --mlsg-gb-img-height intentionally undefined: a definite height disables
	   aspect-ratio (spec), which silently broke the Image Ratio control
	   (v1.9.181). Fixed-height mode sets it per widget instead. */
}

/* ── MLS badges ──────────────────────────────────────────────────────────
 * Every badge carries "mlsg-badge", its group (--status, --type, --label)
 * and its value (--status-active). These are the colours a badge starts
 * on; Site Settings › MLS Badges replaces them per value (its rules sit
 * under the page's kit class, so they outrank these), and a setting made
 * in one widget sets --mlsg-gb-badge-bg / --mlsg-gb-badge-text on the badge itself,
 * which outranks both. Surfaces read:
 *   background  var(--mlsg-gb-badge-bg, var(--mlsg-gb-badge-bg-default))
 *   color       var(--mlsg-gb-badge-text, var(--mlsg-gb-badge-text-default))
 */
.mlsg-badge {
	--mlsg-gb-badge-bg-default: var(--mlsg-gb-color-badge-bg);
	--mlsg-gb-badge-text-default: var(--mlsg-gb-color-badge-text);
}

.mlsg-badge--type {
	--mlsg-gb-badge-bg-default: var(--mlsg-gb-color-muted);
}

.mlsg-badge--label {
	--mlsg-gb-badge-bg-default: #475569;
}

.mlsg-badge--label-new {
	--mlsg-gb-badge-bg-default: var(--mlsg-success, #047857);
}

.mlsg-badge--label-pricecut {
	--mlsg-gb-badge-bg-default: var(--mlsg-danger, #b91c1c);
}

.mlsg-badge--label-openhouse {
	--mlsg-gb-badge-bg-default: #2563eb;
}

.mlsg-badge--label-featured {
	--mlsg-gb-badge-bg-default: rgba(0, 0, 0, 0.55);
}