/**
 * The colour bridge — where this theme and the CarvoLite Portal plugin meet.
 *
 * The plugin scopes everything under `.cvl`, drives it from about thirty
 * `--cvl-*` custom properties, and contains no `!important` anywhere. Its own
 * stylesheet says why: specificity should do the work, so that a host theme
 * can override it and stay debuggable. This file takes it up on that.
 *
 * Loaded *after* `portal.css` (see the dependency in `inc/portal.php`), it
 * redeclares those variables in terms of `theme.json` presets. The effect is
 * that a rental company picks one brand colour in the Site Editor and the
 * search form, the fleet cards, the "Last one" badge, the focus rings and the
 * booking button all follow it — with no CSS edited and, more to the point,
 * no fork of the plugin. The same plugin build ships to a customer who keeps
 * their own theme and never loads this file at all.
 *
 * ── Why only some values are mapped ───────────────────────────────────────
 *
 * A brand colour is one value; the plugin needs five (base, hover, deep, and
 * two tints). Asking the site owner for five would mean five chances to pick a
 * hover colour lighter than the base. So the rest are derived with
 * `color-mix()`, which is the only reason the derivations are in CSS and not
 * in PHP: they have to re-derive live as the Site Editor changes the preset,
 * and a value computed in PHP would be stale until the page was saved.
 *
 * The `@supports` guard matters. On a browser without `color-mix()` an invalid
 * value would make the declaration drop, and the *plugin's* value survives —
 * a red hover state under a blue brand. Not perfect, but it is the plugin's
 * own carefully chosen red rather than a transparent button, and that is the
 * right way to fail. Every engine has shipped `color-mix()` since 2023.
 *
 * ── Deliberately not mapped ───────────────────────────────────────────────
 *
 * `--cvl-success`, the warning tints and the info tints stay as the plugin set
 * them. They are status colours: "confirmed" should be green on every rental
 * site in the world, and a company whose brand is green does not thereby get
 * to make "cancelled" green too. Only `--cvl-success` itself follows the
 * palette, so a site that has deliberately set a success colour is honoured.
 */

.cvl {
	/* ── Brand ── */
	--cvl-brand: var(--wp--preset--color--brand, #d02027);
	--cvl-brand-deep: var(--wp--preset--color--brand-deep, #8e1319);

	/* ── Text ── */
	--cvl-ink: var(--wp--preset--color--ink, #161a1f);
	--cvl-ink-soft: var(--wp--preset--color--ink-soft, #3e444c);
	--cvl-ink-muted: var(--wp--preset--color--ink-muted, #6c737e);

	/* ── Surfaces & lines ── */
	--cvl-surface: var(--wp--preset--color--surface, #ffffff);
	--cvl-sunken: var(--wp--preset--color--sunken, #f6f7f8);
	--cvl-chip: var(--wp--preset--color--chip, #f1f2f4);
	--cvl-line: var(--wp--preset--color--line, #e3e5ea);

	/* ── Status ── */
	--cvl-success: var(--wp--preset--color--success, #2fa96b);

	/**
	 * Radii come from one theme-level pair rather than from `theme.json`,
	 * which has no radius preset to read. Changing `--cvlr-radius-card` in
	 * `theme.css` reshapes the theme's own cards and the plugin's fleet cards
	 * together, which is the whole point of them being here.
	 */
	--cvl-r-field: var(--cvlr-radius-field, 10px);
	--cvl-r-card: var(--cvlr-radius-card, 14px);

	/* Elevation, from the `theme.json` shadow presets. */
	--cvl-shadow-card: var(--wp--preset--shadow--card, 0 1px 2px rgba(16, 20, 28, 0.04));
	--cvl-shadow-hover: var(--wp--preset--shadow--hover, 0 6px 20px rgba(16, 20, 28, 0.09));
}

@supports (color: color-mix(in srgb, #000 50%, #fff)) {
	.cvl {
		/**
		 * Hover is the brand darkened, not a second palette entry.
		 *
		 * 88/12 rather than something larger because the plugin's own pair
		 * (#d02027 → #b8161d) is about that distance, and it is tuned: enough
		 * that the press registers, little enough that the button does not
		 * appear to change colour.
		 */
		--cvl-brand-hover: color-mix(in srgb, var(--cvl-brand) 88%, #000);

		/**
		 * The tints back error notices and the "Last one" badge. Mixed toward
		 * the *surface* colour rather than toward white, so they still read as
		 * tinted paper if the site is set on an off-white background.
		 */
		--cvl-brand-tint: color-mix(in srgb, var(--cvl-brand) 8%, var(--cvl-surface));
		--cvl-brand-tint-border: color-mix(in srgb, var(--cvl-brand) 24%, var(--cvl-surface));

		/**
		 * Text on a tint, so it is mixed toward ink rather than toward black —
		 * pure black on a coloured ground looks like a rendering fault, and
		 * this has to clear 4.5:1 against `--cvl-brand-tint` for a notice a
		 * customer must actually read.
		 */
		--cvl-brand-deep: color-mix(in srgb, var(--cvl-brand) 62%, var(--cvl-ink));

		--cvl-shadow-brand: 0 2px 6px color-mix(in srgb, var(--cvl-brand) 30%, transparent);

		/* The remaining greys, all derived so one palette drives the set. */
		--cvl-ink-subtle: color-mix(in srgb, var(--cvl-ink-muted) 72%, var(--cvl-surface));
		--cvl-line-soft: color-mix(in srgb, var(--cvl-line) 55%, var(--cvl-surface));
		--cvl-field: color-mix(in srgb, var(--cvl-sunken) 70%, var(--cvl-surface));
		--cvl-field-border: color-mix(in srgb, var(--cvl-line) 85%, var(--cvl-surface));

		--cvl-success-tint: color-mix(in srgb, var(--cvl-success) 10%, var(--cvl-surface));
		--cvl-success-tint-border: color-mix(in srgb, var(--cvl-success) 28%, var(--cvl-surface));
		--cvl-success-deep: color-mix(in srgb, var(--cvl-success) 58%, var(--cvl-ink));
	}
}

/**
 * The focus ring.
 *
 * `portal.css` hardcodes `rgba(208, 32, 39, 0.12)` in its `:focus` shadow —
 * the one brand value in the file that is not a variable, so it cannot be
 * reached from outside. Restating the whole declaration is the only way to
 * recolour it, and it is worth doing: a red halo around a focused field on a
 * blue site is the kind of detail that makes an integration look bought
 * rather than built.
 *
 * The selector matches the plugin's own (`.cvl .cvl-input:focus`) exactly, so
 * it wins on source order alone. No `!important`, same as the plugin.
 */
@supports (color: color-mix(in srgb, #000 50%, #fff)) {
	.cvl .cvl-input:focus {
		border-color: var(--cvl-brand);
		box-shadow: 0 0 0 3px color-mix(in srgb, var(--cvl-brand) 14%, transparent);
	}
}

/**
 * Give the plugin's components room inside block layout.
 *
 * They are self-contained cards with their own padding and were written to sit
 * in a theme that puts nothing around them. Block themes put a `blockGap`
 * between siblings but nothing between a shortcode block and the section that
 * follows, so without this the fleet grid butts against the next pattern.
 */
.wp-block-shortcode > .cvl,
.entry-content > .cvl {
	margin-block: var(--wp--preset--spacing--40, 1.5rem);
}

/**
 * The fleet grid is `auto-fill, minmax(260px, 1fr)`. On a full-width section
 * that is a lot of columns and cards become postage stamps, so a portal
 * shortcode placed at `alignfull` is held to the theme's wide measure.
 */
.wp-block-shortcode.alignfull > .cvl,
.wp-block-shortcode.alignwide > .cvl {
	max-width: var(--wp--style--global--wide-size, 1440px);
	margin-inline: auto;
}