/*
 * GREEN BADGER — chrome inversion.
 *
 * When CONTROL THE HUNGER's cream field is behind the mobile top app bar, the
 * bar takes the plate's cream and dark text; elsewhere it is the normal black
 * chrome. The bottom nav deliberately does NOT participate — see
 * chrome-inversion.js for the measurement that settled that.
 *
 * A NEW layer, loaded after app-shell.css. It edits nothing in Phase 1: every
 * rule here is either a custom property of its own, or a re-declaration of a
 * surface that app-shell.css already owns, winning on cascade order at equal
 * specificity rather than on !important.
 *
 * The app bar already painted from custom properties, but the ones it used are
 * BRAND tokens (--dm-black, --dm-cream) shared with every section on the page —
 * swapping those would invert the whole site. The chrome needed properties of
 * its own, which is what this file adds.
 */

body.dm-pack-green-badger {
	--dm-bar-bg: var(--dm-black);
	--dm-bar-fg: var(--dm-cream);
	--dm-bar-rule: var(--dm-hairline);
	--dm-chrome-shift: 280ms;
}

/* #f4f1e8 is the cream the plate actually paints at this width
   (sections.css:2117); the desktop plate's #f4ecdc never reaches mobile. */
body.dm-pack-green-badger.is-chrome-inverted {
	--dm-bar-bg: #f4f1e8;
	--dm-bar-fg: #0b0b0a;
	--dm-bar-rule: rgba(184, 154, 91, .55);
}

/* Only background-color and color transition. Height and border-width keep
   app-shell.css's own 220ms, so the 56->48 scroll-compress is untouched, and
   no layout property is animated. */
body.dm-pack-green-badger .dm-app-bar {
	background: var(--dm-bar-bg);
	transition: height 220ms ease, border-color 220ms ease,
		background-color var(--dm-chrome-shift) ease;
}

body.dm-pack-green-badger .dm-app-bar.is-compact {
	border-bottom-color: var(--dm-bar-rule);
}

body.dm-pack-green-badger .dm-app-bar__brand,
body.dm-pack-green-badger .dm-app-bar__action {
	color: var(--dm-bar-fg);
	transition: color var(--dm-chrome-shift) ease;
}

/* The gold cart badge reads on both grounds, so it is left alone. */

/* Reduced motion still gets the swap — the bar has to stay legible against the
   cream plate — but it arrives instantly instead of animating. */
@media (prefers-reduced-motion: reduce) {
	body.dm-pack-green-badger {
		--dm-chrome-shift: 0ms;
	}
}