/*
 * ConsentPilot, in the house palette.
 *
 * The plugin is written against tokens — every colour, face, radius and easing
 * in its stylesheet reads a `--cp-*` custom property — so re-skinning it is a
 * binding, not an override war. This sheet binds those tokens to the design
 * system's own, and adds rules only where a token cannot express the gesture.
 *
 * THE BANNER IS OLIVE IN BOTH THEMES, and that is a decision, not a shortcut.
 * The rail, the footer and the dark bands are the design's constant (ADR-0022);
 * only the canvas flips. A consent banner is chrome, it sits directly above the
 * olive footer, and the publication should sound the same in it whichever theme
 * the reader is in. It also means one palette instead of two, which is why this
 * file has no dark block: there is nothing to flip.
 *
 * THE ONE SPECIFICITY NOTE, AND IT IS NOT DECORATION. The plugin ships its own
 * dark palette on selectors of the shape
 * `html[data-theme="dark"] [data-consentpilot-theme="auto"]` — 0,2,1, on the
 * ELEMENT rather than on the document, so a `:root` binding loses to it by
 * proximity no matter how the sheets are ordered. It also enqueues itself at
 * priority 10010, which is after every theme sheet, so source order cannot be
 * the tie-breaker either. `:root:root` is the doubled-selector idiom for
 * "outrank that deliberately": 0,3,0, above the plugin's 0,2,1, and independent
 * of load order and of any sheet a cache plugin concatenates.
 *
 * The binding also has to match in ALL FOUR theme states, which is why it keys
 * on the carrier attribute alone rather than on a theme: the palette below is
 * theme-constant, so there is exactly one answer to give.
 */

:root:root [data-consentpilot-theme] {
	/*
	 * --- surfaces: the constant olive, one step deeper -------------------
	 *
	 * `olive-deep` rather than `olive`, and the reason is what the banner lands
	 * on. It is fixed to the bottom of the viewport, so at the foot of the page
	 * it sits directly on the footer — which is `olive` — and the two merged
	 * into one dark mass with a 18%-opacity hairline between them that could not
	 * be seen. A tonal step reads as in front of; a hairline between two
	 * identical grounds reads as nothing.
	 */
	--cp-bg-solid:      var(--dcv-olive-deep);
	--cp-bg-muted:      var(--dcv-olive);
	--cp-overlay:       oklch(0.205 0.019 132 / 0.82);

	/* --- type ------------------------------------------------------------ */
	--cp-text:           var(--dcv-on-olive);
	--cp-text-secondary: var(--dcv-on-olive-muted);
	--cp-text-inverse:   var(--dcv-olive-deep);

	--cp-font:         var(--dcv-font-ui);
	--cp-font-display: var(--dcv-font-display);

	/* --- rules: hairlines, as everywhere else ---------------------------- */
	--cp-border:        var(--dcv-on-olive-line);
	--cp-border-strong: var(--dcv-on-olive-muted);

	/*
	 * The accent on dark ground is the gold, which is what every other olive
	 * surface on the site uses for a link, a kicker and a Mark. It is 7.8:1 on
	 * the olive; the terracotta would have measured 2.2:1 and disappeared.
	 */
	--cp-accent:       var(--dcv-cat-glow);
	--cp-accent-hover: var(--dcv-on-olive);
	--cp-accent-soft:  var(--dcv-olive-raised);

	/* The banner's own top edge, which has to read against the footer directly
	   under it as well as against the canvas everywhere else. */
	--cp-border-top:   var(--dcv-on-olive-muted);

	/* The two decisions carry identical weight, which is the plugin's own
	   design and also the law's: refusing must be as easy as accepting. */
	--cp-decision:      var(--dcv-accent-action);
	--cp-decision-text: var(--dcv-on-olive);

	/* --- the switch ------------------------------------------------------ */
	--cp-toggle-bg:    var(--dcv-olive-raised);
	--cp-toggle-bg-on: var(--dcv-accent-action);
	--cp-toggle-knob:  var(--dcv-on-olive);

	/* --- geometry, motion, focus ----------------------------------------- */
	--cp-radius-sm: var(--dcv-radius);
	--cp-radius:    var(--dcv-radius);
	--cp-radius-lg: var(--dcv-radius-lg);

	--cp-ease:     var(--dcv-ease);
	--cp-duration: var(--dcv-duration-fast);

	--cp-focus-width:  var(--dcv-focus-width);
	--cp-focus-offset: var(--dcv-focus-offset);
	--cp-focus-color:  var(--dcv-cat-glow);

	/*
	 * No shadow. A banner separated from the page by a tonal change and a
	 * hairline is the design's own transition; a soft drop shadow under it is
	 * the second, decorative one. The dialog is separated by its overlay.
	 */
	--cp-shadow:        none;
	--cp-shadow-banner: none;
}

/* --- the gestures a token cannot carry -------------------------------------- */

/*
 * Headings are set in the display face at the weight the file actually ships.
 * `font-weight: 500` asks for a cut of Bluu Next that does not exist.
 */
.consentpilot-banner__title,
.consentpilot-modal__title {
	font-weight: 700;
	letter-spacing: -0.01em;
}

/*
 * An action's hover INVERTS the surface it stands on. The plugin swaps the fill
 * for a lighter one and keeps the label, which is the "darken by one step"
 * gesture a reader has to go looking for; here the terracotta plate becomes the
 * gold one and the label goes to olive, exactly as `.dcv-action` does on every
 * other olive surface on the site.
 */
.consentpilot-btn--accept:hover,
.consentpilot-btn--reject:hover,
.consentpilot-btn--accept:focus-visible,
.consentpilot-btn--reject:focus-visible {
	background: var(--dcv-cat-glow);
	border-color: var(--dcv-cat-glow);
	color: var(--dcv-olive-deep);
}

/* The same movement on the third action, which starts from the gold. */
.consentpilot-btn--save:hover,
.consentpilot-btn--save:focus-visible {
	background: var(--dcv-on-olive);
	border-color: var(--dcv-on-olive);
	color: var(--dcv-olive-deep);
}

/*
 * The banner's top edge. The tonal step does most of the work; a hairline at the
 * muted cut rather than at 18% finishes it, so the boundary is legible whether
 * the banner is over the warm canvas or over the olive footer.
 */
.consentpilot-banner--bottom { border-top-color: var(--cp-border-top); }

/* Uppercase micro-label tracking, at the project's value rather than the
   plugin's, so the banner's buttons and the site's read as one family. */
.consentpilot-btn,
.consentpilot-preferences-btn {
	letter-spacing: var(--dcv-label-tracking);
	font-weight: var(--dcv-label-weight);
}

/*
 * The colophon's control.
 *
 * A `<button>`, because it opens a dialog on the page it is already on — the
 * plugin's link variant renders `href="#"`, which this repository forbids and
 * its release gate asserts against. It stands on the olive footer rather than
 * inside the banner, so it takes the footer's own vocabulary: the muted cut, the
 * micro-label size, and no control chrome at all. A bordered uppercase button
 * beside a copyright line would be the loudest thing in the footer.
 *
 * The house link gesture is restated here rather than borrowed from `.dcv-wipe`:
 * the plugin's shortcode emits the element, and a class handed to it arrives
 * alongside its own rather than in place of it, so the gesture has to be written
 * on a selector that outranks `.consentpilot-preferences-btn`.
 */
.dcv-footer .dcv-consent-control {
	min-height: 0;
	/*
	 * The only padding it has, and it is there for the pointer rather than for
	 * the look: at the footer's micro-label size the label alone is a 14px-tall
	 * target, under WCAG 2.5.8's 24px floor. The rule the hover draws moves down
	 * with it, which is the same distance the site's links set their underline at.
	 */
	padding: 0.3rem 0;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	background-image: linear-gradient(var(--dcv-cat-glow), var(--dcv-cat-glow));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
	font-family: var(--dcv-font-ui);
	font-size: var(--dcv-text-xs);
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: none;
	color: var(--dcv-on-olive-muted);
	cursor: pointer;
	transition: background-size var(--dcv-duration) var(--dcv-ease),
	            color var(--dcv-duration-fast) var(--dcv-ease);
}

.dcv-footer .dcv-consent-control:hover,
.dcv-footer .dcv-consent-control:focus-visible {
	background-size: 100% 1px;
	color: var(--dcv-on-olive);
}