/**
 * Shared component contracts.
 * Existing selectors keep their approved presentation; these classes provide
 * the stable architecture used as page styles are consolidated in later stages.
 */
.fo-button {
  min-height: var(--fo-button-height);
  border-radius: var(--fo-radius-md);
  transition: background-color var(--fo-duration-normal) var(--fo-ease-standard),
              border-color var(--fo-duration-normal) var(--fo-ease-standard),
              color var(--fo-duration-normal) var(--fo-ease-standard);
}
.fo-button--primary { background: var(--fo-primary); color: var(--fo-text-inverse); }
.fo-button--secondary { background: var(--fo-surface-1); color: var(--fo-text-primary); border: 1px solid var(--fo-border); }
.fo-icon-button { inline-size: var(--fo-icon-button-size); block-size: var(--fo-icon-button-size); border-radius: var(--fo-radius-md); }
.fo-card { background: var(--fo-surface-1); border: 1px solid var(--fo-border); border-radius: var(--fo-radius-lg); }
.fo-field { min-height: var(--fo-control-height); background: var(--fo-surface-2); color: var(--fo-text-primary); border: 1px solid var(--fo-border); border-radius: var(--fo-radius-md); }
.fo-badge { display: inline-flex; align-items: center; border-radius: var(--fo-radius-pill); }
.fo-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--fo-space-4); }
.fo-empty-state { display: grid; place-items: center; text-align: center; padding: var(--fo-space-8); }
.fo-modal-surface { background: var(--fo-surface-1); border: 1px solid var(--fo-border); border-radius: var(--fo-radius-xl); box-shadow: var(--fo-shadow-modal); }