/**
 * WS Form: maps WS Form's style variables to the theme's tokens, so every
 * form picks up the brand colours, radius, type scale and light/dark scheme
 * with no styler work per site.
 *
 * Loaded by inc/forms-wsform.php only when WS Form renders a form on the
 * page. WS Form keeps its own CSS for structure, field types and states.
 *
 * This file is deliberately NOT in a cascade layer. WS Form sets its
 * variables unlayered at zero specificity (:where([data-wsf-style-id])),
 * and unlayered CSS beats layered CSS whatever the specificity, so a
 * layered rule could never override them. .wsf-form (0,1,0) unlayered wins.
 */

.wsf-form {
	/* Form-level colours. WS Form derives its own shades from these with color-mix(). */
	--wsf-form-color-background: transparent;
	--wsf-form-color-base: var(--text-color);
	--wsf-form-color-base-contrast: var(--bg-body);
	--wsf-form-color-primary: var(--primary);
	--wsf-form-color-secondary: var(--secondary);
	--wsf-form-color-accent: var(--primary); /* checked state of checkboxes and radios */
	--wsf-form-color-neutral: var(--text-muted);
	/* success, info, warning and danger keep WS Form's defaults: the theme has no status colours yet */

	/* Type: inherit the page, body size and line height */
	--wsf-form-font-family: inherit;
	--wsf-form-font-size: var(--text-m);
	--wsf-form-font-size-small: var(--text-s);
	--wsf-form-font-size-large: var(--text-l);
	--wsf-form-line-height: var(--text-m-line-height);

	/* Spacing between fields */
	--wsf-form-grid-gap: var(--space-s);

	/* Fields */
	--wsf-field-color-background: var(--bg-body);
	--wsf-field-color-background-disabled: var(--bg-surface-alt);
	--wsf-field-color: var(--text-color);
	--wsf-field-color-placeholder: var(--text-muted);
	--wsf-field-border-color: var(--border-color-strong);
	--wsf-field-border-color-hover: var(--border-color-strong);
	--wsf-field-border-color-focus: var(--focus-color);
	--wsf-field-box-shadow-color-focus: var(--focus-color);
	--wsf-field-box-shadow-width-focus: var(--focus-width);
	--wsf-field-border-radius: var(--radius);
	--wsf-field-padding-horizontal: 1rem;
	--wsf-field-padding-vertical: 0.75rem;

	/* Labels, legends, help and validation text */
	--wsf-field-label-color: var(--heading-color);
	--wsf-field-label-font-family: var(--font-heading);
	--wsf-field-label-font-weight: 500;
	--wsf-field-label-gap: 0.4rem;
	--wsf-field-fieldset-legend-color: var(--heading-color);
	--wsf-field-fieldset-legend-font-family: var(--font-heading);
	--wsf-field-fieldset-legend-font-weight: 500;
	--wsf-section-legend-color: var(--heading-color);
	--wsf-section-legend-font-weight: var(--heading-weight);
	--wsf-field-help-color: var(--text-muted);
	--wsf-field-invalid-feedback-gap: 0.4rem;

	/* Checkboxes and radios */
	--wsf-field-checkbox-border-radius: calc(var(--radius) / 2);
	--wsf-field-checkbox-checkmark-color: var(--white);
	--wsf-field-radio-checked-circle-color: var(--white);

	/* Buttons: the same --btn-* system as the theme's Button block, so a
	   form button matches every other button on the site. */
	--wsf-field-button-width: auto;
	--wsf-field-button-border-radius: var(--btn-radius, var(--radius));
	--wsf-field-button-border-width: var(--btn-border-width, 2px);
	--wsf-field-button-padding-vertical: var(--btn-padding-block, var(--space-s));
	--wsf-field-button-padding-horizontal: var(--btn-padding-inline, var(--space-l));
	--wsf-field-button-font-size: var(--btn-font-size, var(--text-m));
	--wsf-field-button-font-family: var(--font-heading);
	--wsf-field-button-font-weight: 500;
	--wsf-field-button-line-height: 1.2;
	--wsf-field-button-primary-color-background: var(--btn-bg, var(--btn-color, var(--primary)));
	--wsf-field-button-primary-color-background-hover: var(--btn-bg-hover, var(--btn-color-hover, var(--primary-hover)));
	--wsf-field-button-primary-color-background-focus: var(--btn-bg-hover, var(--btn-color-hover, var(--primary-hover)));
	--wsf-field-button-primary-border-color: var(--btn-border-color, var(--btn-color, var(--primary)));
	--wsf-field-button-primary-border-color-hover: var(--btn-border-color-hover, var(--btn-color-hover, var(--primary-hover)));
	--wsf-field-button-primary-border-color-focus: var(--btn-border-color-hover, var(--btn-color-hover, var(--primary-hover)));
	--wsf-field-button-primary-color: var(--btn-text, var(--white));
	--wsf-field-button-primary-color-hover: var(--btn-text-hover, var(--btn-text, var(--white)));
	--wsf-field-button-primary-color-focus: var(--btn-text-hover, var(--btn-text, var(--white)));
	/* Secondary (non-primary) buttons: previous, add row, clear */
	--wsf-field-button-color-background: var(--bg-surface);
	--wsf-field-button-color-background-hover: var(--bg-surface-alt);
	--wsf-field-button-color-background-focus: var(--bg-surface-alt);
	--wsf-field-button-border-color: var(--border-color-strong);
	--wsf-field-button-border-color-hover: var(--border-color-strong);
	--wsf-field-button-border-color-focus: var(--border-color-strong);
	--wsf-field-button-color: var(--text-color);
}

/* WS Form's visually hidden legend (read by screen readers only) asks for
   weight 500 in the body font. Invisible, but it would still download a
   font file the kit no longer carries. */
.wsf-form legend.wsf-hidden-element {
	font-weight: inherit;
}