/* Design-system Button and Input, ported from the Stop Marketing design system's
   Button.jsx / Input.jsx (radius forced to 0 on this site — buttons are clipped
   into notched shapes with clip-path by the calling markup). */

.ds-btn {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  border-radius: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  line-height: 1;
  border: 2px solid transparent;
  transition: background var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
  transform: scale(1);
}
.ds-btn:active:not(:disabled) { transform: scale(0.97); }
.ds-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.ds-btn--sm { padding: 8px 16px; font-size: var(--text-body-s); }
.ds-btn--md { padding: 12px 22px; font-size: var(--text-body-m); }
.ds-btn--lg { padding: 16px 28px; font-size: var(--text-body-l); }

.ds-btn--primary { background: var(--accent-primary); color: var(--text-on-accent); }
.ds-btn--primary:hover:not(:disabled) { background: var(--accent-primary-hover); }

.ds-btn--secondary { background: var(--navy-900); color: var(--pure-white); }
.ds-btn--secondary:hover:not(:disabled) { background: var(--navy-700); }

.ds-btn--outline { background: transparent; color: var(--navy-900); border-color: var(--border-strong); }
.ds-btn--outline:hover:not(:disabled) { background: var(--surface-muted); }

.ds-btn--ghost { background: transparent; color: var(--navy-900); }
.ds-btn--ghost:hover:not(:disabled) { background: var(--surface-muted); }

.ds-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-body);
  width: 100%;
}
.ds-field__label {
  font-size: var(--text-body-s);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}
.ds-field__input,
textarea.ds-field__input {
  padding: 11px 14px;
  font-size: var(--text-body-m);
  font-family: var(--font-body);
  border-radius: var(--radius-m);
  color: var(--text-primary);
  border: 2px solid var(--border-default);
  outline: none;
  background: var(--pure-white);
  transition: border-color var(--duration-fast) var(--ease-standard);
}
textarea.ds-field__input { resize: vertical; }
.ds-field__input:focus { border-color: var(--focus-ring); }
.ds-field--error .ds-field__input { border-color: var(--danger); }
.ds-field__input:disabled { background: var(--surface-muted); opacity: 0.6; }
.ds-field__error {
  font-size: var(--text-caption);
  color: var(--danger);
}
.ds-field__req { color: var(--danger); margin-left: 3px; }
.ds-field__opt, .ds-form-note {
  color: var(--text-secondary);
  font-size: var(--text-caption);
  font-weight: var(--weight-regular);
}
.ds-form-note { margin: 16px 0 12px; }