/**
 * Category badge colours (global).
 *
 * One map, shared by every block that shows a post's category as a pill. The
 * badge element carries `dm-cat` plus `dm-cat--<slug>`; the owning block keeps
 * its own size, padding and radius and reads only --cat-bg / --cat-fg here.
 *
 * The slug is sanitize_title() of the category NAME rather than the term slug,
 * so re-slugging a term does not silently drop its colour. Anything without a
 * rule below falls through to the sun-yellow default, which is why this file
 * loads globally instead of per block.
 *
 * CONFIRMED against the design: mezcal-fundamental, knowledge.
 * ESTIMATED by eye from the Figma screenshot and awaiting real hexes:
 * how-to-drink, sustainability, history, video, event.
 */

.dm-cat {
	--cat-bg: var(--dm-fg-accent-yellow);                   /* Semantics/bg/accent/yellow */
	--cat-fg: var(--dm-bg-default-tertiary);                   /* Semantics/fg/default/primary */
}

.dm-cat--mezcal-fundamental {
	--cat-bg: var(--dm-fg-accent-yellow);
	--cat-fg: var(--dm-bg-default-tertiary);
}

.dm-cat--knowledge {
	--cat-bg: var(--dm-bg-success-primary);
	--cat-fg: var(--dm-bg-default-white);
}

.dm-cat--how-to-drink {
	--cat-bg: var(--dm-ext-badge-blue);
	--cat-fg: var(--dm-bg-default-white);
}

.dm-cat--sustainability {
	--cat-bg: var(--dm-ext-badge-orange);
	--cat-fg: var(--dm-bg-default-white);
}

.dm-cat--history {
	--cat-bg: var(--dm-ext-badge-magenta);
	--cat-fg: var(--dm-bg-default-white);
}

.dm-cat--video {
	--cat-bg: var(--dm-ext-badge-indigo);
	--cat-fg: var(--dm-bg-default-white);
}

/* Singular and plural, since the design labels this pill "Events". */
.dm-cat--event,
.dm-cat--events {
	--cat-bg: var(--dm-ext-badge-emerald);
	--cat-fg: var(--dm-bg-default-white);
}