/* ============================================================================
   Alpha Branding Studio — Form System
   assets/css/forms.css
   ----------------------------------------------------------------------------
   The complete form component. Load after tokens.css, base.css, layout.css,
   utilities.css, buttons.css.

   Contract:
   - Uses ONLY variables from tokens.css. No hardcoded colors/spacing/type/
     borders/shadows.
   - base.css already sets bare input/textarea/select defaults (16px min font,
     surface bg, hairline border, radius, focus ring). This file adds the
     component layer: layout, labels, custom controls, states, validation.
   - No JS. States are attribute/class-driven so WordPress form plugins
     (CF7, Gravity Forms, WPForms) can hook in via their own classes (see §16).
   - Calm, roomy, legible — a premium studio doesn't cram (per COMPONENT.md).
   ============================================================================ */


/* ==========================================================================
   1. FORM LAYOUT
   ========================================================================== */

.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  inline-size: 100%;
}

/* A single label + control + help/error unit */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-inline-size: 0;              /* allow shrink inside grid rows */
}

/* Row of groups — single column on mobile, multi-column from md up */
.form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}

@media (min-width: 768px) {
  .form-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .form-row-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  /* A group that should always span the full row width */
  .form-group-full {
    grid-column: 1 / -1;
  }
}

/* Fieldset grouping (radio/checkbox sets, related fields) */
.form-fieldset {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  border: var(--border-hairline) solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  min-inline-size: 0;
}

.form-legend {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  padding-inline: var(--space-2);
}


/* ==========================================================================
   2. LABELS, HELPER TEXT & DESCRIPTIONS
   ========================================================================== */

.form-label {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1);
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--text-secondary);
}

/* Required indicator — Flare asterisk. Pair with a real "required" for SR
   (visually-hidden text in markup) so color isn't the only signal. */
.form-label .required,
.form-label[data-required]::after {
  color: var(--color-flare);
  font-weight: var(--fw-medium);
}
.form-label[data-required]::after {
  content: "*";
  margin-inline-start: var(--space-1);
}

/* Optional indicator — muted, lowercase */
.form-label .optional {
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  color: var(--text-muted);
  text-transform: none;
}

/* Helper text / field description (below label or below control) */
.form-help,
.form-description {
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
  color: var(--text-muted);
}

.form-description {
  margin-block-end: var(--space-1);
}


/* ==========================================================================
   3. INPUTS  (text, email, password, number, tel, url, search)
   Shared control surface for text-like inputs, textarea, and select.
   ========================================================================== */

.form-control,
.form-input,
.form-textarea,
.form-select {
  inline-size: 100%;
  min-block-size: 52px;
  padding-block: var(--space-3);
  padding-inline: var(--space-4);
  font-family: var(--font-body);
  font-size: max(var(--fs-body), 16px);    /* 16px min prevents iOS zoom */
  line-height: var(--lh-snug);
  color: var(--text-primary);
  background-color: var(--bg-surface);
  border: var(--border-hairline) solid var(--border-default);
  border-radius: var(--radius-md);
  transition:
    border-color var(--dur-base) var(--ease-standard),
    box-shadow   var(--dur-base) var(--ease-standard),
    background-color var(--dur-base) var(--ease-standard);
}

.form-control::placeholder,
.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

/* Remove native number spinners for a cleaner monochrome field */
.form-input[type="number"] {
  -moz-appearance: textfield;
}
.form-input[type="number"]::-webkit-outer-spin-button,
.form-input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


/* ==========================================================================
   4. TEXTAREA
   ========================================================================== */

.form-textarea {
  min-block-size: 140px;
  resize: vertical;
  line-height: var(--lh-body);
}


/* ==========================================================================
   5. SELECT DROPDOWN
   Custom chevron via inline SVG (currentColor-safe two-tone not needed;
   uses a token-tinted stroke). Appearance reset for consistent cross-browser.
   ========================================================================== */

.form-select {
  appearance: none;
  cursor: pointer;
  padding-inline-end: var(--space-8);      /* room for the chevron */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%233D3D3A' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  background-size: var(--icon-md);
}

/* RTL: mirror the chevron position */
[dir="rtl"] .form-select {
  background-position: left var(--space-4) center;
}

.form-select[multiple] {
  background-image: none;
  padding-inline-end: var(--space-4);
  min-block-size: auto;
}


/* ==========================================================================
   6. CHECKBOX  (custom, accessible)
   Real <input> stays in the DOM (accent + focus), visually styled control.
   ========================================================================== */

.form-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-block-size: 44px;                 /* touch target for the whole row */
  padding-block: var(--space-2);
  cursor: pointer;
}

.form-check-input {
  appearance: none;
  flex-shrink: 0;
  inline-size: 20px;
  block-size: 20px;
  margin: 0;
  margin-block-start: 0.1em;            /* optical align to label first line */
  background-color: var(--bg-surface);
  border: var(--border-medium) solid var(--color-ink);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard);
}

/* Checkmark via background SVG (Paper tick on Flare fill) */
.form-check-input[type="checkbox"]:checked {
  background-color: var(--color-flare);
  border-color: var(--color-flare);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 74%;
}

.form-check-input:indeterminate {
  background-color: var(--color-flare);
  border-color: var(--color-flare);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 74%;
}

.form-check-label {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--text-secondary);
  cursor: pointer;
}


/* ==========================================================================
   7. RADIO BUTTONS  (custom, accessible)
   Shares .form-check row; the input is circular with a filled dot.
   ========================================================================== */

.form-check-input[type="radio"] {
  border-radius: var(--radius-pill);
}

.form-check-input[type="radio"]:checked {
  background-color: var(--bg-surface);
  border-color: var(--color-flare);
  /* inner dot */
  background-image: radial-gradient(
    circle,
    var(--color-flare) 0 40%,
    transparent 46%
  );
}


/* ==========================================================================
   8. TOGGLE SWITCH
   Built on a checkbox; track + knob. Off = Ash, On = Flare.
   ========================================================================== */

.form-switch {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-block-size: 44px;
  cursor: pointer;
}

.form-switch-input {
  appearance: none;
  position: relative;
  flex-shrink: 0;
  inline-size: 44px;
  block-size: 26px;
  margin: 0;
  background-color: var(--color-ash);
  border: var(--border-hairline) solid var(--border-default);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
}

/* Knob */
.form-switch-input::before {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 3px;
  inline-size: 18px;
  block-size: 18px;
  transform: translateY(-50%);
  background-color: var(--color-bone);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-xs);
  transition: inset-inline-start var(--dur-base) var(--ease-standard);
}

.form-switch-input:checked {
  background-color: var(--color-flare);
  border-color: var(--color-flare);
}
.form-switch-input:checked::before {
  inset-inline-start: calc(100% - 21px);
}

.form-switch-label {
  font-size: var(--fs-body-sm);
  color: var(--text-secondary);
  cursor: pointer;
}


/* ==========================================================================
   9. FILE UPLOAD  (drag-and-drop appearance)
   Dropzone is a styled <label> wrapping a visually-hidden <input type=file>.
   State classes (.is-dragover, .is-uploading, .has-error) are toggled by the
   plugin/JS layer; CSS provides all visuals.
   ========================================================================== */

.form-file {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-block-size: 140px;
  padding: var(--space-6);
  text-align: center;
  color: var(--text-secondary);
  background-color: var(--bg-page);
  border: var(--border-medium) dashed var(--border-default);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition:
    border-color var(--dur-base) var(--ease-standard),
    background-color var(--dur-base) var(--ease-standard),
    color var(--dur-base) var(--ease-standard);
}

/* The real input covers the zone but stays invisible + accessible */
.form-file-input {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  opacity: 0;
  cursor: pointer;
}

.form-file-icon {
  inline-size: var(--icon-lg);
  block-size: var(--icon-lg);
  color: var(--text-muted);
}

.form-file-text { font-size: var(--fs-body-sm); }
.form-file-text strong { color: var(--text-accent); font-weight: var(--fw-medium); }
.form-file-hint { font-size: var(--fs-caption); color: var(--text-muted); }

/* Hover / keyboard focus on the zone */
.form-file:hover,
.form-file-input:focus-visible + .form-file,
.form-file:focus-within {
  border-color: var(--color-ink);
  background-color: var(--bg-surface);
  color: var(--text-primary);
}

/* Drag-over */
.form-file.is-dragover {
  border-color: var(--color-flare);
  background-color: var(--accent-wash);
  color: var(--text-accent);
}

/* Uploading */
.form-file.is-uploading {
  border-style: solid;
  border-color: var(--color-flare);
  cursor: progress;
}

/* Error */
.form-file.has-error {
  border-color: var(--color-error);
  background-color: color-mix(in srgb, var(--color-error) 6%, transparent);
  color: var(--color-error);
}


/* ==========================================================================
   10. INPUT STATES
   Default is §3. Hover / focus / filled / disabled / read-only + validation
   surfaces below. Applies to input, textarea, select uniformly.
   ========================================================================== */

/* Hover */
.form-control:hover,
.form-input:hover,
.form-textarea:hover,
.form-select:hover {
  border-color: var(--border-strong);
}

/* Focus — Ink border + Flare-tinted ring (token). Overrides base.css nicely. */
.form-control:focus,
.form-input:focus,
.form-textarea:focus,
.form-select:focus,
.form-control:focus-visible,
.form-input:focus-visible,
.form-textarea:focus-visible,
.form-select:focus-visible {
  outline: none;
  border-color: var(--text-primary);
  box-shadow: var(--shadow-focus);
}

/* Custom controls focus ring */
.form-check-input:focus-visible,
.form-switch-input:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* Filled (autofill-safe) — keep brand surface, avoid the yellow autofill */
.form-input:-webkit-autofill,
.form-input:-webkit-autofill:hover,
.form-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text-primary);
  -webkit-box-shadow: 0 0 0 100px var(--bg-surface) inset;
  caret-color: var(--text-primary);
}

/* Disabled */
.form-control:disabled,
.form-input:disabled,
.form-textarea:disabled,
.form-select:disabled,
.form-check-input:disabled,
.form-switch-input:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  background-color: var(--bg-page);
}
.form-check-input:disabled ~ .form-check-label,
.form-switch-input:disabled ~ .form-switch-label {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Read-only — legible but visibly non-editable */
.form-control:read-only,
.form-input:read-only,
.form-textarea:read-only {
  background-color: var(--bg-page);
  color: var(--text-secondary);
  border-color: var(--border-default);
  cursor: default;
}
/* Don't gray out non-editable-by-nature inputs */
.form-input[type="date"]:read-only,
.form-input[type="file"]:read-only {
  background-color: var(--bg-surface);
}

/* ---- Validation surfaces (state via .is-* class or native :user-invalid) - */

/* Success */
.form-group.is-success .form-control,
.form-group.is-success .form-input,
.form-group.is-success .form-textarea,
.form-group.is-success .form-select,
.form-control.is-success {
  border-color: var(--color-success);
}
.form-group.is-success .form-control:focus,
.form-control.is-success:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-success) 28%, transparent);
}

/* Error — native :user-invalid picks up plugin/browser validation too */
.form-group.is-error .form-control,
.form-group.is-error .form-input,
.form-group.is-error .form-textarea,
.form-group.is-error .form-select,
.form-control.is-error,
.form-input:user-invalid,
.form-textarea:user-invalid,
.form-select:user-invalid {
  border-color: var(--color-error);
}
.form-group.is-error .form-control:focus,
.form-control.is-error:focus,
.form-input:user-invalid:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-error) 28%, transparent);
}

/* Warning */
.form-group.is-warning .form-control,
.form-control.is-warning {
  border-color: var(--color-warning);
}
.form-group.is-warning .form-control:focus,
.form-control.is-warning:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-warning) 28%, transparent);
}


/* ==========================================================================
   11. VALIDATION MESSAGES & CHARACTER COUNT
   Icon + text on every message (color is never the only signal).
   ========================================================================== */

.form-message {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
}
.form-message > svg {
  inline-size: var(--icon-sm);
  block-size: var(--icon-sm);
  flex-shrink: 0;
  margin-block-start: 0.1em;
}

.form-message-error   { color: var(--color-error); }
.form-message-success { color: var(--color-success); }
.form-message-warning { color: var(--color-warning); }
.form-message-info    { color: var(--text-muted); }

/* Character counter — sits at the field's end, turns Clay near the limit */
.form-count {
  align-self: flex-end;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.form-count.is-limit {
  color: var(--color-error);
  font-weight: var(--fw-medium);
}


/* ==========================================================================
   12. INPUT GROUPS  (leading/trailing icon, prefix/suffix)
   Wrapper aligns an adornment with the control; the control's padding is
   adjusted so text never sits under the adornment.
   ========================================================================== */

.input-group {
  position: relative;
  display: flex;
  align-items: stretch;
  inline-size: 100%;
}

/* Icon adornments overlaid inside the field */
.input-group-icon {
  position: absolute;
  inset-block: 0;
  display: flex;
  align-items: center;
  color: var(--text-muted);
  pointer-events: none;
}
.input-group-icon > svg {
  inline-size: var(--icon-md);
  block-size: var(--icon-md);
}

.input-group-icon-start { inset-inline-start: var(--space-4); }
.input-group-icon-end   { inset-inline-end: var(--space-4); }

.input-group:has(.input-group-icon-start) .form-control,
.input-group:has(.input-group-icon-start) .form-input {
  padding-inline-start: var(--space-8);
}
.input-group:has(.input-group-icon-end) .form-control,
.input-group:has(.input-group-icon-end) .form-input {
  padding-inline-end: var(--space-8);
}

/* If the trailing icon is interactive (clear/toggle password), enable clicks */
.input-group-icon.is-interactive {
  pointer-events: auto;
  cursor: pointer;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
}
.input-group-icon.is-interactive:hover { color: var(--color-flare); }

/* Text prefix / suffix — segmented adornments (e.g. https://, .com, ₹) */
.input-group-prefix,
.input-group-suffix {
  display: inline-flex;
  align-items: center;
  padding-inline: var(--space-4);
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
  background-color: var(--bg-page);
  border: var(--border-hairline) solid var(--border-default);
  white-space: nowrap;
}
.input-group-prefix {
  border-start-start-radius: var(--radius-md);
  border-end-start-radius: var(--radius-md);
  border-inline-end: 0;
}
.input-group-suffix {
  border-start-end-radius: var(--radius-md);
  border-end-end-radius: var(--radius-md);
  border-inline-start: 0;
}
.input-group:has(.input-group-prefix) .form-control,
.input-group:has(.input-group-prefix) .form-input {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}
.input-group:has(.input-group-suffix) .form-control,
.input-group:has(.input-group-suffix) .form-input {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}
/* Let the control take remaining width in a segmented group */
.input-group-prefix ~ .form-control,
.input-group-suffix,
.input-group .form-control { flex: 1 1 auto; min-inline-size: 0; }


/* ==========================================================================
   13. SEARCH FIELD
   Pill-shaped variant with a leading magnifier; clears native decorations.
   ========================================================================== */

.form-search {
  padding-inline-start: var(--space-8);
  border-radius: var(--radius-pill);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%238A8880' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left var(--space-4) center;
  background-size: var(--icon-md);
}
[dir="rtl"] .form-search {
  padding-inline-start: var(--space-4);
  padding-inline-end: var(--space-8);
  background-position: right var(--space-4) center;
}
.form-search::-webkit-search-decoration,
.form-search::-webkit-search-cancel-button {
  -webkit-appearance: none;
}


/* ==========================================================================
   14. FORM ACTIONS
   Button alignment row; stacks full-width on mobile (mirrors buttons.css).
   ========================================================================== */

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-block-start: var(--space-3);
}

.form-actions-end     { justify-content: flex-end; }
.form-actions-between { justify-content: space-between; }
.form-actions-center  { justify-content: center; }

@media (max-width: 767px) {
  .form-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .form-actions .btn {
    inline-size: 100%;
  }
}


/* ==========================================================================
   15. ACCESSIBILITY
   Contrast/focus handled in state rules (Ink borders, --shadow-focus ring,
   AA-compliant semantic colors). These cover forced-colors, coarse pointers,
   and reduced motion.
   ========================================================================== */

/* Coarse pointers: guarantee 44px+ targets on custom controls */
@media (pointer: coarse) {
  .form-check,
  .form-switch { min-block-size: 48px; }
}

/* Windows High Contrast / forced-colors */
@media (forced-colors: active) {
  .form-control,
  .form-input,
  .form-textarea,
  .form-select,
  .form-check-input,
  .form-switch-input,
  .form-file {
    border-color: ButtonText;
  }
  .form-control:focus-visible,
  .form-input:focus-visible,
  .form-textarea:focus-visible,
  .form-select:focus-visible,
  .form-check-input:focus-visible,
  .form-switch-input:focus-visible {
    outline: var(--border-thick) solid Highlight;
    outline-offset: 2px;
  }
  .form-check-input:checked,
  .form-switch-input:checked {
    background-color: Highlight;
  }
}


/* ==========================================================================
   16. WORDPRESS PLUGIN COMPATIBILITY
   Map common plugin field classes onto the system surface so third-party
   forms inherit the brand without markup changes. Extend as needed.
   ========================================================================== */

/* Contact Form 7 */
.wpcf7-form-control:not(.wpcf7-submit):not([type="checkbox"]):not([type="radio"]),
/* Gravity Forms */
.gform_wrapper .gfield input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.gform_wrapper .gfield textarea,
.gform_wrapper .gfield select,
/* WPForms */
.wpforms-field input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.wpforms-field textarea,
.wpforms-field select {
  inline-size: 100%;
  min-block-size: 52px;
  padding-block: var(--space-3);
  padding-inline: var(--space-4);
  font-size: max(var(--fs-body), 16px);
  color: var(--text-primary);
  background-color: var(--bg-surface);
  border: var(--border-hairline) solid var(--border-default);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
}
.gform_wrapper .gfield textarea,
.wpforms-field textarea { min-block-size: 140px; }

.wpcf7-form-control:focus,
.gform_wrapper .gfield input:focus,
.gform_wrapper .gfield textarea:focus,
.gform_wrapper .gfield select:focus,
.wpforms-field input:focus,
.wpforms-field textarea:focus,
.wpforms-field select:focus {
  outline: none;
  border-color: var(--text-primary);
  box-shadow: var(--shadow-focus);
}

/* Plugin labels */
.wpcf7-form label,
.gform_wrapper .gfield_label,
.wpforms-field-label {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
}

/* Plugin validation → reuse brand error color + surfaces */
.wpcf7-not-valid,
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield_error select,
.wpforms-field input.wpforms-error,
.wpforms-field textarea.wpforms-error {
  border-color: var(--color-error) !important;
}

.wpcf7-not-valid-tip,
.gform_wrapper .validation_message,
.wpforms-error {
  font-size: var(--fs-caption);
  color: var(--color-error);
}

/* Plugin submit buttons inherit the Primary "Shutter" look.
   (Full button behavior lives in buttons.css; this maps the surface.) */
.wpcf7-submit,
.gform_wrapper .gform_footer input[type="submit"],
.wpforms-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 52px;
  padding-block: var(--space-3);
  padding-inline: var(--space-6);
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--color-paper);
  background-color: var(--color-ink);
  border: var(--border-medium) solid var(--color-ink);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard);
}
.wpcf7-submit:hover,
.gform_wrapper .gform_footer input[type="submit"]:hover,
.wpforms-submit:hover {
  background-color: var(--color-flare);
  border-color: var(--color-flare);
  color: var(--color-bone);
  transform: translateY(-1px);
}


/* ==========================================================================
   17. MOTION — reduced-motion support
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .form-control,
  .form-input,
  .form-textarea,
  .form-select,
  .form-check-input,
  .form-switch-input,
  .form-switch-input::before,
  .form-file {
    transition: none;
  }
}