/**
 * cfsp-forms-bridge.css — theme ↔ plugin integration layer.
 *
 * The Contact Form Styler plugin (cf7-form-styler) is deliberately theme-AGNOSTIC:
 * its form styling references no theme tokens and derives colors from the
 * inherited `currentColor`, exposing a small `--cfsp-*` Custom Property API for
 * branding. This file is the THEME's opt-in to that API — it maps the plugin's
 * variables onto littleextra's palette/scale so the seeded contact forms adopt
 * the active palette (and re-skin on a palette swap, per foundation Rule 20).
 *
 * It lives in the THEME, not the plugin: using `--wp--preset--*` tokens here is
 * correct (this is a theme stylesheet), and it keeps the plugin portable. Loaded
 * in the editor canvas (add_editor_style) and on the front end so the form-ref
 * preview and the swapped CF7 block both pick up the branding.
 *
 * NOTE on text colors: the plugin derives label/placeholder/input text from
 * `currentColor`. Inside a `surface`-backed card the inherited currentColor can
 * resolve to a light tone, which left labels/placeholders/typed text unreadable
 * (and forcing the variable to 100% didn't help — 100% of a light color is still
 * light). So this bridge PINS the text + structure colors to the real palette
 * tokens. They stay palette-aware (flip with a dark style variation) but no
 * longer depend on whatever currentColor happens to be in context.
 */

.themed-form,
.cfsp-bespoke {
	/* Selected-state + focus accent → the theme's primary role. */
	--cfsp-accent: var(--wp--preset--color--primary);

	/* Text + structure colors pinned to the palette (see file note above). */
	--cfsp-field-text: var(--wp--preset--color--ink);
	--cfsp-label: color-mix(in srgb, var(--wp--preset--color--ink) 82%, transparent);
	--cfsp-muted: var(--wp--preset--color--text-muted);
	--cfsp-field-border: var(--wp--preset--color--hairline);
	--cfsp-hairline: var(--wp--preset--color--hairline);
	--cfsp-surface: color-mix(in srgb, var(--wp--preset--color--ink) 5%, transparent);

	/* Submit becomes a filled brand button (plugin default is outlined). */
	--cfsp-submit-bg: var(--wp--preset--color--primary);
	--cfsp-submit-text: var(--wp--preset--color--surface);
	--cfsp-submit-border: var(--wp--preset--color--primary);

	/* Raised cards/panels (e.g. the healthcare department cards + form card)
	   read as the theme's real surface rather than the plugin's neutral tint. */
	--cfsp-card-bg: var(--wp--preset--color--surface);

	/* Align field rhythm + radius with the theme's spacing scale. */
	--cfsp-field-radius: 8px;
	--cfsp-gap: var(--wp--preset--spacing--40);
	--cfsp-row-gap: var(--wp--preset--spacing--30);
}

/* Filled fields read as a light tint of the ink token — reliable inside any
   card context (the plugin's currentColor-based tint can otherwise go invisible
   against a white card). */
.themed-form.is-style-filled,
.cfsp-coworking {
	--cfsp-field-bg: color-mix(in srgb, var(--wp--preset--color--ink) 6%, transparent);
}

/* ---- Plugin-owned contact PATTERNS (cfsp-patterns.css) ----
   Map the pattern theme-variables to littleextra's palette/scale so the
   plugin's portable patterns render pixel-identically to the theme. Without
   this bridge the patterns fall back to their built-in neutral defaults. */
:root {
	--cfsp-pat-accent: var(--wp--preset--color--primary);
	--cfsp-pat-mono: var(--wp--preset--font-family--mono);
	--cfsp-pat-display: var(--wp--preset--font-family--display);
	--cfsp-pat-label-size: var(--wp--preset--font-size--xs);
	--cfsp-pat-muted: var(--wp--preset--color--text-muted);
	--cfsp-pat-card-bg: var(--wp--preset--color--surface);
	--cfsp-pat-hairline: var(--wp--preset--color--hairline);
	--cfsp-pat-brand-bg: var(--wp--preset--color--primary);
	--cfsp-pat-on-brand: var(--wp--preset--color--surface);
	--cfsp-pat-dark-bg: var(--wp--preset--color--ink);
	--cfsp-pat-on-dark: var(--wp--preset--color--surface);
}