/*
 * Card badges: the type badge, the verdict and the platform pills printed by
 * Cards::badges(), which the dnews/card-badges block and the theme cards
 * use. Every badge carries its word, so color is never the only signal.
 *
 * Colors: each reads the theme's color role with a light fallback, `var(--wp
 * --preset--color--role, #light)`, and the
 * verdict colors read a `--wp--custom--verdict--*` token the theme does not
 * define yet (W4 and W5 will), so the
 * fallbacks below are what ships on the v1 theme. The two dark blocks at the
 * end repeat the properties with dark
 * fallbacks, the same two selectors as the theme's dark.css (the visitor's
 * OS preference unless the page is forced
 * light, and an explicit data-theme="dark"), so a theme without dark roles
 * still gets readable badges. Every text and
 * background pair is at least 4.5:1 in both modes. No literal hex outside a
 * var() fallback.
 */
:root {
	--dnews-badge-bg: var(--wp--preset--color--surface-muted, #f5f5f5);
	--dnews-badge-ink: var(--wp--preset--color--heading, #29292f);
	--dnews-badge-line: var(--wp--preset--color--line-strong, #e0e0e0);
	--dnews-badge-review-bg: var(--wp--preset--color--button-bg, #14141b);
	--dnews-badge-review-ink: var(--wp--preset--color--button-text, #fff);
	--dnews-badge-tech-ink: var(--wp--custom--badge--tech--ink, #a8321f);
	--dnews-verdict-must-play-bg: var(--wp--custom--verdict--must-play--bg, #146c43);
	--dnews-verdict-must-play-ink: var(--wp--custom--verdict--must-play--ink, #fff);
	--dnews-verdict-recommended-bg: var(--wp--custom--verdict--recommended--bg, #1d4ed8);
	--dnews-verdict-recommended-ink: var(--wp--custom--verdict--recommended--ink, #fff);
	--dnews-verdict-wait-for-sale-bg: var(--wp--custom--verdict--wait-for-sale--bg, #ffcf40);
	--dnews-verdict-wait-for-sale-ink: var(--wp--custom--verdict--wait-for-sale--ink, #22181c);
	--dnews-verdict-skip-bg: var(--wp--custom--verdict--skip--bg, #a82a1a);
	--dnews-verdict-skip-ink: var(--wp--custom--verdict--skip--ink, #fff);
	--dnews-pill-bg: var(--wp--preset--color--surface, #fff);
	--dnews-pill-ink: var(--wp--preset--color--body, #3e3e44);
	--dnews-pill-line: var(--wp--preset--color--line-strong, #e0e0e0);
}

/* One compact line under the card title: it wraps on narrow cards and never
 * grows past 12px type. */
.dnews-card__badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--space-1, 4px);
	margin: var(--wp--preset--spacing--space-2, 8px) 0 0;
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: var(--wp--preset--font-size--micro, 12px);
	font-weight: 600;
	line-height: 1.3;
}

.dnews-badge,
.dnews-verdict,
.dnews-pill {
	display: inline-block;
	padding: 2px var(--wp--preset--spacing--space-2, 8px);
	border: 1px solid transparent;
	border-radius: var(--wp--custom--radius--badge, 4px);
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	white-space: nowrap;
}

/* Type badges: neutral, except Review (the page's anchor type) and Tech (an
 * outlined label beside the type). */
.dnews-badge {
	border-color: var(--dnews-badge-line);
	background: var(--dnews-badge-bg);
	color: var(--dnews-badge-ink);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.dnews-badge--review {
	border-color: var(--dnews-badge-review-bg);
	background: var(--dnews-badge-review-bg);
	color: var(--dnews-badge-review-ink);
}

.dnews-badge--tech {
	border-color: currentcolor;
	background: transparent;
	color: var(--dnews-badge-tech-ink);
}

/* Verdicts: a filled chip, always with its word. */
.dnews-verdict--must-play {
	background: var(--dnews-verdict-must-play-bg);
	color: var(--dnews-verdict-must-play-ink);
}

.dnews-verdict--recommended {
	background: var(--dnews-verdict-recommended-bg);
	color: var(--dnews-verdict-recommended-ink);
}

.dnews-verdict--wait-for-sale {
	background: var(--dnews-verdict-wait-for-sale-bg);
	color: var(--dnews-verdict-wait-for-sale-ink);
}

.dnews-verdict--skip {
	background: var(--dnews-verdict-skip-bg);
	color: var(--dnews-verdict-skip-ink);
}

/* Platform pills: outlined, quiet. */
.dnews-pill {
	border-color: var(--dnews-pill-line);
	background: var(--dnews-pill-bg);
	color: var(--dnews-pill-ink);
	font-weight: 400;
}

@media screen and (prefers-color-scheme: dark) {

	:root:not([data-theme="light"]) {
		--dnews-badge-bg: var(--wp--preset--color--surface-muted, #1b1b23);
		--dnews-badge-ink: var(--wp--preset--color--heading, #f3f3f6);
		--dnews-badge-line: var(--wp--preset--color--line-strong, #363641);
		--dnews-badge-review-bg: var(--wp--preset--color--button-bg, #2a2a35);
		--dnews-badge-review-ink: var(--wp--preset--color--button-text, #f3f3f6);
		--dnews-badge-tech-ink: var(--wp--custom--dark--badge-tech-ink, #ff9b8e);
		--dnews-verdict-must-play-bg: var(--wp--custom--dark--verdict-must-play-bg, #0f3d2a);
		--dnews-verdict-must-play-ink: var(--wp--custom--dark--verdict-must-play-ink, #a7f0c9);
		--dnews-verdict-recommended-bg: var(--wp--custom--dark--verdict-recommended-bg, #172554);
		--dnews-verdict-recommended-ink: var(--wp--custom--dark--verdict-recommended-ink, #c7dbff);
		--dnews-verdict-wait-for-sale-bg: var(--wp--custom--dark--verdict-wait-for-sale-bg, #3d3000);
		--dnews-verdict-wait-for-sale-ink: var(--wp--custom--dark--verdict-wait-for-sale-ink, #ffe28a);
		--dnews-verdict-skip-bg: var(--wp--custom--dark--verdict-skip-bg, #4a1710);
		--dnews-verdict-skip-ink: var(--wp--custom--dark--verdict-skip-ink, #ffc2b8);
		--dnews-pill-bg: var(--wp--preset--color--surface, #0f0f14);
		--dnews-pill-ink: var(--wp--preset--color--body, #d2d2d9);
		--dnews-pill-line: var(--wp--preset--color--line-strong, #363641);
	}
}

/* Print stays light: the data-theme rule applies to screens only. */
@media screen {

	:root[data-theme="dark"] {
		--dnews-badge-bg: var(--wp--preset--color--surface-muted, #1b1b23);
		--dnews-badge-ink: var(--wp--preset--color--heading, #f3f3f6);
		--dnews-badge-line: var(--wp--preset--color--line-strong, #363641);
		--dnews-badge-review-bg: var(--wp--preset--color--button-bg, #2a2a35);
		--dnews-badge-review-ink: var(--wp--preset--color--button-text, #f3f3f6);
		--dnews-badge-tech-ink: var(--wp--custom--dark--badge-tech-ink, #ff9b8e);
		--dnews-verdict-must-play-bg: var(--wp--custom--dark--verdict-must-play-bg, #0f3d2a);
		--dnews-verdict-must-play-ink: var(--wp--custom--dark--verdict-must-play-ink, #a7f0c9);
		--dnews-verdict-recommended-bg: var(--wp--custom--dark--verdict-recommended-bg, #172554);
		--dnews-verdict-recommended-ink: var(--wp--custom--dark--verdict-recommended-ink, #c7dbff);
		--dnews-verdict-wait-for-sale-bg: var(--wp--custom--dark--verdict-wait-for-sale-bg, #3d3000);
		--dnews-verdict-wait-for-sale-ink: var(--wp--custom--dark--verdict-wait-for-sale-ink, #ffe28a);
		--dnews-verdict-skip-bg: var(--wp--custom--dark--verdict-skip-bg, #4a1710);
		--dnews-verdict-skip-ink: var(--wp--custom--dark--verdict-skip-ink, #ffc2b8);
		--dnews-pill-bg: var(--wp--preset--color--surface, #0f0f14);
		--dnews-pill-ink: var(--wp--preset--color--body, #d2d2d9);
		--dnews-pill-line: var(--wp--preset--color--line-strong, #363641);
	}
}