/**
 * WS Form — VMG token bridge
 * --------------------------------------------------------------------------
 * WS Form 1.11.x themes every form through `--wsf-*` custom properties. Its
 * per-form skin (uploads/ws-form/css/public/public.style.{id}.css) sets those
 * vars at ZERO specificity — `:where([data-wsf-style-id="N"])` — and the whole
 * component layer derives from a small root tier of semantic colours via
 * `var(--wsf-form-color-*)` references plus `color-mix()` light/dark ramps.
 *
 * So we remap that root tier to the VMG tokens on `.wsf-form` (specificity
 * 0,1,0, which beats the skin's `:where()` regardless of load order). Override
 * the root colours and every derived var — buttons, focus borders, validation,
 * the whole ramp — recomputes to VMG values automatically (the skin's
 * `color-mix(..., var(--wsf-form-color-primary), ...)` re-evaluates against our
 * value). The only hand-mapped component vars are the field literals where the
 * dark theme needs text and border to differ — WS Form's single "base" can't be
 * both — matched to the site's existing Woo/account field treatment in
 * style.css.
 *
 * This is a bridge: shift the palette by editing the VMG tokens, not this file.
 */

.wsf-form {

	/* -- Root semantic palette → VMG (drives ramps + all derived vars) ----- */
	--wsf-form-color-base: var(--ink-100);          /* foreground / labels      */
	--wsf-form-color-base-contrast: var(--ink-100); /* text on filled buttons   */
	--wsf-form-color-primary: var(--hex-violet);    /* CTA / focus / submit bg  */
	--wsf-form-color-accent: var(--hex-violet);
	--wsf-form-color-neutral: var(--ink-30);
	--wsf-form-color-secondary: var(--ink-50);
	--wsf-form-color-success: var(--success);
	--wsf-form-color-info: var(--sapphire-light);
	--wsf-form-color-warning: var(--warning);
	--wsf-form-color-danger: var(--alert-red);

	/* -- Type + rhythm ---------------------------------------------------- */
	/* font-family stays WS Form's default `inherit` → picks up the site body
	   face (Space Grotesk, via the dark-scheme bridge). */
	--wsf-form-font-size: var(--f-body);
	--wsf-form-grid-gap: var(--space-m);

	/* -- Fields → match the site's Woo/account inputs (style.css) ---------- */
	/* base/contrast can't supply text ≠ border on a dark surface, so the field
	   literals are set directly to the same tokens the foundation fields use. */
	--wsf-field-color: var(--ink-100);
	--wsf-field-color-background: var(--ink-08);
	--wsf-field-color-placeholder: var(--ink-30);
	--wsf-field-border-color: var(--ink-15);
	--wsf-field-border-color-hover: var(--ink-30);
	--wsf-field-border-color-focus: var(--hex-violet-light);
	--wsf-field-border-radius: var(--radius-sm);
	--wsf-field-box-shadow-width-focus: 0px;   /* border-only focus, as the
	                                              foundation fields do */

	/* -- Submit (`.wsf-button-primary`) → match site `.btn--primary` ------- */
	/* bg / text already derive from --wsf-form-color-primary + -base-contrast;
	   only the typography needs the site's mono-uppercase button treatment. */
	--wsf-field-button-font-family: var(--font-mono);
	--wsf-field-button-font-weight: 500;
	--wsf-field-button-letter-spacing: 0.15em;
	--wsf-field-button-text-transform: uppercase;
	--wsf-field-button-border-radius: var(--radius);
}

/* Note: --wsf-form-color-base-contrast is the "light text on a coloured fill"
   role (button text), so it maps to near-white --ink-100, not to a literal
   contrast of base. If choice fields rendered as buttons (radio/checkbox
   groups) get added later — whose active background uses base-contrast —
   revisit so the active state doesn't read near-white. */