/* Powershift status badges — the DS Badge component as plain classes.
   Front end AND editor canvas (enqueue_block_assets), so the editor shows the real thing.

   A badge is a STATE, and it is never a control. It has square corners for exactly that
   reason: every button on this site carries the top-left/bottom-right chamfer (see
   buttons.css), so the cut is what tells a visitor "this is clickable". A badge must not
   borrow it, must not stretch to fill a row, and must not carry a hairline ring — those
   are the three things that make a static label read as a button.

   A label that is not a state — a product marker, "New" — is a Tag, not a Badge.

       <span class="pwr-badge pwr-badge--positive pwr-badge--dot">Online</span>
       <span class="pwr-badge pwr-badge--warning">Charging</span>
       <span class="pwr-badge pwr-badge--critical pwr-badge--tint">Fault</span>

   Modifiers combine one colour with any of the others:
     status   --positive  --warning  --critical  --info  --neutral (the default)
     colour   --orange  --green  --grey     a brand colour, not a state
     --tint   12% tint of the fill, the family's darker step as ink
     --dot    leading 7px square status dot in the ink colour

   In the editor: put the classes under Block → Advanced → Additional CSS class(es) on a
   Paragraph — the badge shrinks to its label and drops its margins — or drop the <span>
   in through the Code editor.

   Retargeted from "badges and buttons/badges/badges.css" to this theme's palette slugs:
   the handoff was written against `pwr-*` presets, which this theme does not have. Two
   fills have no preset at all here — Deep Orange #d8391f and Blue #1268b2 live only inside
   gradients — so those carry the hex directly. The values still match the component.

   CONTRAST: every solid badge passes AA (4.6:1 and up). Three TINTS do not, at this size:
   --warning --tint 4.3:1, --critical --tint 3.9:1, --orange --tint 3.0:1. Use the solid
   form for those three wherever the label actually has to be read. */

.pwr-badge {
	--pwr-badge-fill: var(--wp--preset--color--grey, #495c73);
	--pwr-badge-ink: var(--wp--preset--color--base, #ffffff);
	--pwr-badge-tint: #495c731f;
	--pwr-badge-tint-ink: var(--wp--preset--color--grey, #495c73);

	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: fit-content;
	margin-block: 0;
	padding: 3px 10px;
	border-radius: 0;
	font-family: var(--wp--preset--font-family--red-hat-display, "Red Hat Display", system-ui, sans-serif);
	font-weight: 600;
	/* xs, the label token — it was a hard 0.75rem (12px), one pixel off the scale. */
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.55;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
	color: var(--pwr-badge-ink);
	background: var(--pwr-badge-fill);
}

.pwr-badge--tint {
	color: var(--pwr-badge-tint-ink);
	background: var(--pwr-badge-tint);
}

.pwr-badge--dot::before {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	background: currentColor;
}

/* ── Status ── */
.pwr-badge--positive { /* Green */
	--pwr-badge-fill: var(--wp--preset--color--green, #3dad56);
	--pwr-badge-ink: var(--wp--preset--color--contrast, #0f212c);
	--pwr-badge-tint: #3dad561f;
	--pwr-badge-tint-ink: #00724d;
}
.pwr-badge--warning { /* Light Orange */
	--pwr-badge-fill: var(--wp--preset--color--orange-light, #fdb823);
	--pwr-badge-ink: var(--wp--preset--color--contrast, #0f212c);
	--pwr-badge-tint: #fdb8231f;
	--pwr-badge-tint-ink: #d8391f;
}
.pwr-badge--critical { /* Deep Orange — no preset in this theme */
	--pwr-badge-fill: #d8391f;
	--pwr-badge-ink: var(--wp--preset--color--base, #ffffff);
	--pwr-badge-tint: #d8391f1f;
	--pwr-badge-tint-ink: #d8391f;
}
.pwr-badge--info { /* Blue — the one sanctioned UI use of the campaign family */
	--pwr-badge-fill: #1268b2;
	--pwr-badge-ink: var(--wp--preset--color--base, #ffffff);
	--pwr-badge-tint: #1268b21f;
	--pwr-badge-tint-ink: #1268b2;
}
.pwr-badge--neutral { /* Grey — the default, repeated so the class can be written out */
	--pwr-badge-fill: var(--wp--preset--color--grey, #495c73);
	--pwr-badge-ink: var(--wp--preset--color--base, #ffffff);
	--pwr-badge-tint: #495c731f;
	--pwr-badge-tint-ink: var(--wp--preset--color--grey, #495c73);
}

/* ── A plain brand colour, not a state ── */
.pwr-badge--orange {
	--pwr-badge-fill: var(--wp--preset--color--orange, #f58228);
	--pwr-badge-ink: var(--wp--preset--color--contrast, #0f212c);
	--pwr-badge-tint: #f582281f;
	--pwr-badge-tint-ink: var(--wp--preset--color--orange, #f58228);
}
.pwr-badge--green {
	--pwr-badge-fill: var(--wp--preset--color--green-light, #7ec252);
	--pwr-badge-ink: var(--wp--preset--color--contrast, #0f212c);
	--pwr-badge-tint: #7ec2521f;
	--pwr-badge-tint-ink: #00724d;
}
.pwr-badge--grey {
	--pwr-badge-fill: var(--wp--preset--color--contrast, #0f212c);
	--pwr-badge-ink: var(--wp--preset--color--base, #ffffff);
	--pwr-badge-tint: #0f212c1f;
	--pwr-badge-tint-ink: var(--wp--preset--color--contrast, #0f212c);
}